Cube+

One-Page Parallax Responsive Template


Thank you for purchasing our theme. We provide the quick support for our awesome clients. If you need more help in your development about our theme, please write the question to us at . You can encourage us by sending suggestions at Nur Codes Creative for development and we will add your details in acknowledgement.

If any or all of this documentation is not totally clear, please let us know so we can improve our documentation and help you with something when our assistance is required. Thanks so much!

index.html

<div class="wrapper">
  <div id="primary" class="navbar navbar-inverse">
    <div class="logo"><a href="#"><strong class="_bg">C</strong>
<span class="_u">UBE<strong>+</strong></span></a></div>
    <button type="button" class="btn btn-navbar" data-toggle="collapse" 
data-target=".nav-collapse"> <span class="icon-bar"></span> 
<span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <div class="nav-collapse collapse">
      <ul id="nav">
        <li class="active"><a href="#home">HOME</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#blog">BLOG</a></li>
        <li><a href="#priceplans">PRICE PLANS</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
  <div class="header" id="home">
    <div class="container">
      <div class="logo"><a href="#"><strong class="_bg">C</strong>
<span class="_u">UBE<strong>+</strong></span></a></div>
    </div>
    <div class="row-fluid">
      <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
            <div class="container">
              <div class="carousel-caption  center">
                <h1 data-animate="rollIn">We are ‘rebranding’ the brands!</h1>
                <p class="text-info" data-animate="bounceInUp">In gravida neque a 
suscipit lobortis nisi arcu dapibus ligula ultrices pharetra lorem leo sed</p>
              </div>
              <img class="slide-01" src="images/carousel/slide-01.png" alt="" /> </div>
          </div>
          <div class="item">
            <div class="container">
              <div class="carousel-caption caption2">
                <h1 data-animate="lightSpeedIn">We are ‘rebranding’ the brands!</h1>
                <p class="lead" data-animate="fadeInDown">In gravida neque a suscipit 
lobortis nisi arcu
                  dapibus ligula ultrices pharetra lorem leo sed
                  Maecenas blandit dolor ut justo.
                  Proin iaculis, mauris eu sodales cursus, </p>
                <a class="buy-now" href="#">BUY NOW</a> <a href="#" class="learn-more">
LEARN MORE</a> </div>
              <img class="slide-02" src="images/carousel/slide-02.png" alt="" /> </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="icon-angle-left"></i></a> <a class="right carousel-control" 
href="#myCarousel" data-slide="next"><i class="icon-angle-right"></i></a> </div>
    </div>
    <a href="#responsive_design" class="next-section responsive_design">
<i class="icon-double-angle-down"></i></a> </div>
  <div class="clearfix"></div>
  <div id="responsive_design">
    <div class="container">
      <div class="content">
        <ul>
          <li class="animatd"><img src="images/desktop.png" alt="" /></li>
          <li class="animate1"><img src="images/notebooks.png" alt="" /></li>
          <li class="animate2"><img src="images/tablets.png" alt="" /></li>
          <li class="animate0"><img src="images/mobile.png" alt="" /></li>
        </ul>
        <h2>We build scalable websites which easily fits in to any screen!</h2>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="about">
    <div class="head">
      <h1>ABOUT</h1>
      <a href="#about" class="next-section about animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title">
          <p class="border animated"><span>MISSION &amp; TARGETS</span></p>
        </div>
        <div class="message">
          <p class="animate0">Praesent turpis pede varius sed tincidunt sed 
pellentesque in nisi usce malesuada gravida tellus. Curabitur nisi odio ultricies
 
fermentum. Morbi elit. Aliquam faucibus ed vehicula congue diam. Nam nulla augue, 

faucibus nec, lacinia quis, ornare eros. Suspendisse vel justo malesuada venenatis 

velit. Pellentesque habitant morbi tristique senectus et netus et malesuada 

fames ac turpis egestas.</p>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span4 animated">
          <article>
            <div class="item_box">
              <div class="icon user"></div>
              <h3>WHO WE ARE</h3>
              <p>Ut sodales feugiat nulla. Suspendisse risus odio, posuere a,
 volutpat ac, adipiscing pellentesque, diam. Etiam in enim sed
                felis interdum lobortis.</p>
            </div>
          </article>
        </div>
        <div class="span4 animate1">
          <article>
            <div class="item_box">
              <div class="icon rocket"></div>
              <h3>WHY CHOOSE US</h3>
              <p>Ut sodales feugiat nulla. Suspendisse risus odio, posuere a, 
volutpat ac, adipiscing pellentesque, diam. Etiam in enim sed
                felis interdum lobortis.</p>
            </div>
          </article>
        </div>
        <div class="span4 animate0">
          <article>
            <div class="item_box">
              <div class="icon hand"></div>
              <h3>WORK FEATURES</h3>
              <p>Ut sodales feugiat nulla. Suspendisse risus odio, posuere a, 
volutpat ac, adipiscing pellentesque, diam. Etiam in enim sed
                felis interdum lobortis.</p>
            </div>
          </article>
        </div>
      </div>
      <div class="row-fluid">
        <div class="page_title">
          <p class="border animate1"> <span>TEAM &amp; SKILLS </span></p>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span3 animated">
          <article>
            <div class="team">
              <div class="member_photo"><img src="images/team/JOHN-DOE.png" alt="">
</div>
              <div class="social">
                <ul>
                  <li><a href="#"><i class="icon-facebook"></i></a></li>
                  <li><a href="#"><i class="icon-twitter"></i></a></li>
                  <li><a href="#"><i class="icon-linkedin"></i></a></li>
                  <li><a href="#"><i class="icon-dribbble"></i></a></li>
                </ul>
              </div>
              <div class="member_info">
                <h4>JOHN DOE</h4>
                <i>Digital Artist</i> </div>
              <div class="skill">
                <div class="chart">
                  <div class="percentage" data-percent="86">
                    <div class="percentage_inner"><span>85</span>%</div>
                  </div>
                  <div class="label">Skill Description</div>
                </div>
              </div>
            </div>
          </article>
        </div>
        <div class="span3 animate1">
          <article>
            <div class="team">
              <div class="member_photo"><img src="images/team/KEVIN-THOMAS.png" alt="">
</div>
              <div class="social">
                <ul>
                  <li><a href="#"><i class="icon-facebook"></i></a></li>
                  <li><a href="#"><i class="icon-twitter"></i></a></li>
                  <li><a href="#"><i class="icon-linkedin"></i></a></li>
                  <li><a href="#"><i class="icon-dribbble"></i></a></li>
                </ul>
              </div>
              <div class="member_info">
                <h4>KEVIN THOMAS</h4>
                <i>photographer</i> </div>
              <div class="skill">
                <div class="chart">
                  <div class="percentage" data-percent="76">
                    <div class="percentage_inner"><span>75</span>%</div>
                  </div>
                  <div class="label">Skill Description</div>
                </div>
              </div>
            </div>
          </article>
        </div>
        <div class="span3 animate2">
          <article>
            <div class="team">
              <div class="member_photo"><img src="images/team/ELLISA-JAMES.png" alt="">
</div>
              <div class="social">
                <ul>
                  <li><a href="#"><i class="icon-facebook"></i></a></li>
                  <li><a href="#"><i class="icon-twitter"></i></a></li>
                  <li><a href="#"><i class="icon-linkedin"></i></a></li>
                  <li><a href="#"><i class="icon-dribbble"></i></a></li>
                </ul>
              </div>
              <div class="member_info">
                <h4>ELLISA JAMES</h4>
                <i>designer</i> </div>
              <div class="skill">
                <div class="chart">
                  <div class="percentage" data-percent="61">
                    <div class="percentage_inner"><span>60</span>%</div>
                  </div>
                  <div class="label">Skill Description</div>
                </div>
              </div>
            </div>
          </article>
        </div>
        <div class="span3 animate0">
          <article>
            <div class="team">
              <div class="member_photo"><img src="images/team/VANESSA-PAUL.png" alt="">
</div>
              <div class="social">
                <ul>
                  <li><a href="#"><i class="icon-facebook"></i></a></li>
                  <li><a href="#"><i class="icon-twitter"></i></a></li>
                  <li><a href="#"><i class="icon-linkedin"></i></a></li>
                  <li><a href="#"><i class="icon-dribbble"></i></a></li>
                </ul>
              </div>
              <div class="member_info">
                <h4>VANESSA PAUL</h4>
                <i>programmer</i> </div>
              <div class="skill">
                <div class="chart">
                  <div class="percentage" data-percent="51">
                    <div class="percentage_inner"><span>50</span>%</div>
                  </div>
                  <div class="label">Skill Description</div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="parallax1">
    <h2 class="animated">In the beginner’s mind there are many possibilities,<br>
      but in the expert’s mind there are few.<br>
    </h2>
    <span class="animate0">— SHUNRYU SUZUKI</span> </div>
  <div class="clearfix"></div>
  <div id="services">
    <div class="head">
      <h1>SERVICES</h1>
      <a href="#services" class="next-section services animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title">
          <p class="border animated"><span ><img src="images/quote.png" alt="" />
</span> </p>
        </div>
        <div class="message">
          <blockquote class="animate0">Praesent turpis pede varius sed tincidunt 
sed pellentesque in nisi usce malesuada gravida<br> tellus. Curabitur nisi odio 
ultricies fermentum.</blockquote> <span class="postby animated"> 
<strong>JOHN SMITH </strong><br> - CEO & FOUNDER ENETO.NET </span> </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/rocket-2.png" alt="" />
</div>
              </div>
              <h4>DESIGN</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/support.png" alt="" /></div>
              </div>
              <h4>SUPPORT</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla.
 Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/seo.png" alt="" /></div>
              </div>
              <h4>SEO</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/branding.png" alt="" />
</div>
              </div>
              <h4>BRANDING</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/hosting.png" alt="" /></div>
              </div>
              <h4>HOSTING</h4>
            </div>
            <div class="service_hover"><a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a></div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/social.png" alt="" /></div>
              </div>
              <h4>SOCIAL</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/marketing.png" alt="" />
</div>
              </div>
              <h4>MARKETING</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
        <div class="span3 animate2">
          <div class="service_box">
            <div class="service_normal">
              <div class="service_icon_wrap">
                <div  class="service_icon"><img src="images/social.png" alt="" /></div>
              </div>
              <h4>E-COMMERCE</h4>
            </div>
            <div class="service_hover"> <a href="#">Ut sodales feugiat nulla. 
Suspendisse risus odio, posu ere a volutpat ac adipiscing pellent esque diam. 
Etiam in enim sed felis interdum Nulla vitae ipsum. In hac class aptent taciti 
sociosqu ad </a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="parallax2">
    <div class="container">
      <div class="row-fluid content">
        <h1 class="animated">Featuring iOS & Mac<br>
          Applications Development</h1>
        <p class="animate0">We are a creative design studio<br>
          that build modern apps by using modern<br>
          technology!</p>
        <img id="iphone" src="images/iphone.png" alt="" /> 
<a href="#" class="btn">LEARN MORE</a> </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="portfolio">
    <div class="head">
      <h1>PORTFOLIO</h1>
      <a href="#portfolio" class="next-section portfolio animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title">
          <p class="border animated"><span>SHOWCASE OF OUR BEST WORK</span> </p>
        </div>
        <div class="message animate0">
          <p>Sed ipsum liquam faucibus ed vehicula congue diam. Nam nulla augue, 
faucibus nec, lacinia quis, ornare eros. Suspendisse vel justo malesuada venenatis
 velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
ac turpis egestas.</p>
        </div>
      </div>
      <div class="row-fluid">
        <div class="filter">
          <ul id="portfolio-nav">
            <li class="current"><a href="#" data-filter="*">All</a></li>
            <li><a data-filter=".web" href="#">Web Design</a></li>
            <li><a data-filter=".graphic" href="#">Graphic Design</a></li>
            <li><a data-filter=".branding" href="#branding">Brand Identity</a></li>
            <li><a data-filter=".photography" href="#">Photography</a></li>
          </ul>
        </div>
        <div class="portfolio-grid">
          <ul id="thumbs">
            <li class="item web"> <a href="#" class="jquery_popup1">
<img src="images/portfolio/portfolio-01.jpg" alt="" /></a>
              <div id="project1" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-01_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-01_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh 
velit, blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum 
eleifend odio. Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col8 graphic"> <a href="#" class="jquery_popup2">
<img src="images/portfolio/portfolio-02.jpg" alt=""/></a>
              <div id="project2" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-02_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-02_large.jpg" 
class="zoom fancybox" data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit,
 blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item web graphic"> <a href="#" class="jquery_popup3">
<img src="images/portfolio/portfolio-03.jpg"  alt=""/></a>
              <div id="project3" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-03_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-03_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit, 
blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item web graphic"> <a href="#" class="jquery_popup4">
<img src="images/portfolio/portfolio-04.jpg" alt="" /></a>
              <div id="project4" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-04_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-04_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit,
 blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item web"> <a href="#" class="jquery_popup5">
<img src="images/portfolio/portfolio-05.jpg" alt="" /></a>
              <div id="project5" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-05_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-05_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam.
 Duis faucibus. Nulla facil sil<br>  Etiam quis quam. In eget dolor. Nullam nibh 
velit, blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum 
eleifend odio. Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col3 graphic"> <a href="#" class="jquery_popup6">
<img src="images/portfolio/portfolio-06.jpg"  alt=""/></a>
              <div id="project6" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-06_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-06_large.jpg" 
class="zoom fancybox" data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit, 
blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col2 photography"> <a href="#" class="jquery_popup7">
<img src="images/portfolio/portfolio-07.jpg" alt="" /></a>
              <div id="project7" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-07_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-07_large.jpg" 
class="zoom fancybox" data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam.
 Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit,
 blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col4 branding web photography"> 
<a href="#" class="jquery_popup8"><img src="images/portfolio/portfolio-08.jpg" alt="" />
</a>
              <div id="project8" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-08_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-08_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit,
 blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio.
 Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col2 photography branding">
 <a href="#" class="jquery_popup9">
<img src="images/portfolio/portfolio-09.jpg" alt="" /></a>
              <div id="project9" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-09_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-09_large.jpg" 
class="zoom fancybox" data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit, 
blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend 
odio. Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="item col4 branding photography graphic"> 
<a href="#" class="jquery_popup10">
<img src="images/portfolio/portfolio-10.jpg" alt="" /></a>
              <div id="project10" style="display:none;">
                <div class="row-fluid">
                  <div class="container project_details">
                    <div class="port_left">
                      <div class="pop_image"> 
<img src="images/portfolio/portfolio-10_pop.jpg" alt=""> 
<a href="images/portfolio/portfolio-10_large.jpg" class="zoom fancybox" 
data-fancybox-group="gallery"></a> </div>
                    </div>
                    <div class="port_right">
                      <h2>PROJECT TITLE</h2>
                      <p>Integer ac elit. Sed id eros eget nisi iaculis aliquam. 
Duis faucibus. Nulla facil sil<br> Etiam quis quam. In eget dolor. Nullam nibh velit, 
blandit vitae pellentesque id<br> ornare ac, erat. Aliquam condimentum eleifend odio. 
Etiam blandit.</p>
                      <a href="#" class="btn"> VISIT SITE</a> </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="parallax3">
    <div class="container">
      <h1 class="animated">LIST OF TRUSTED CLIENTS</h1>
      <ul id="clients">
        <li class="animate1"><img src="images/clients/mell.png" alt=""></li>
        <li class="animate2"><img src="images/clients/macrospecs.png" alt=""></li>
        <li class="animate1"><img src="images/clients/bayareadoves.png" alt=""></li>
        <li class="animate2"><img src="images/clients/nrm.png" alt=""></li>
        <li class="animate1"><img src="images/clients/nsyght.png" alt=""></li>
        <li class="animate2"><img src="images/clients/mell.png" alt=""></li>
        <li class="animate1"><img src="images/clients/macrospecs.png" alt=""></li>
        <li class="animate2"><img src="images/clients/bayareadoves.png" alt=""></li>
        <li class="animate1"><img src="images/clients/nrm.png" alt=""></li>
        <li class="animate2"><img src="images/clients/nsyght.png" alt=""></li>
      </ul>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="blog">
    <div class="head">
      <h1>NEWS BLOG</h1>
      <a href="#blog" class="next-section blog animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title animate0">
          <p class="border"> <span >WHATS HAPPENING IN CUBE+ ? READ HERE</span></p>
        </div>
        <div class="message">
          <p class="animated">Sed ipsum liquam faucibus ed vehicula congue diam. 
Nam nulla augue, faucibus nec, lacinia quis, ornare eros. Suspendisse vel justo
 malesuada venenatis velit. Pellentesque habitant morbi tristique senectus et netus 
et malesuada fames ac turpis egestas.</p>
        </div>
      </div>
      <div class="row-fluid">
        <div id="slider" class="flexslider viewport">
          <ul class="slides">
            <li><img src="images/slider/large/img-01.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-02.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-03.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-04.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-01.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-02.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-03.jpg" alt="" /></li>
            <li><img src="images/slider/large/img-04.jpg" alt="" /></li>
          </ul>
        </div>
        <div id="carousel" class="flexslider custom_carousel">
          <ul class="slides custome_caption">
            <li> <img src="images/slider/img-01.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg" 
 data-fancybox-group="gallery" title="YWE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-02.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg" 
data-fancybox-group="gallery" title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-03.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg" 
data-fancybox-group="gallery"  title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-04.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg" 
data-fancybox-group="gallery"  title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-01.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg"
 data-fancybox-group="gallery"  title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-02.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg"
 data-fancybox-group="gallery" title="YWE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-03.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg"
 data-fancybox-group="gallery" title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
            <li> <img src="images/slider/img-04.jpg" alt="" />
              <div class="rscaption">
                <div class="content">
                  <h5>WE AWARDED BMW BIKES TO OUR TEAM</h5>
                  <p>Written by John Deo<br>
                    on 20 SEP 2013</p>
                  <a class="share fancybox" href="images/slider/large/img-01.jpg"
 data-fancybox-group="gallery" title="WE AWARDED BMW BIKES TO OUR TEAM">
<i class="icon-share"></i></a> </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="parallax4">
    <div class="container">
      <h1 class="animate0">We are ‘rebranding’ the brands</h1>
      <h3 class="animated">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</h3>
      <a href="#" class="btn animate0">READ OUR STORY</a> </div>
  </div>
  <div class="clearfix"></div>
  <div id="priceplans">
    <div class="head">
      <h1>PRICE PLANS</h1>
      <a href="#priceplans" class="next-section priceplans animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title">
          <p class="border"><span>BEST PRICE PLANS FOR CLIENTS</span></p>
        </div>
        <div class="message">
          <p class="animated">Nam nulla augue, faucibus nec, lacinia quis, ornare 
eros. Suspendisse vel justo malesuada venenatis velit. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="span4 animated">
          <div class="plans">
            <ul class="planContainer">
              <li class="title"> <i><img src="images/user-2.png" alt=""></i>
                <h3>INDIVIDUAL</h3>
              </li>
              <li class="price">
                <h1><sup>$</sup>39<span>/month</span></h1>
              </li>
              <li>
                <ul class="options">
                  <li>Free Setup</li>
                  <li>3 Users</li>
                  <li>5 Projects</li>
                  <li>1 GB Storage</li>
                  <li>Nice Features</li>
                  <li>1 Database</li>
                  <li>2 User Accounts</li>
                </ul>
              </li>
              <li class="button"><a href="#">SIGN UP</a></li>
            </ul>
          </div>
        </div>
        <div class="span4 animate2">
          <div class="plans" >
            <ul class="planContainer team">
              <li class="title"> <i><img src="images/dual-user.png" alt=""></i>
                <h3>TEAM</h3>
              </li>
              <li class="price">
                <h1><sup>$</sup>69<span>/month</span></h1>
              </li>
              <li>
                <ul class="options">
                  <li>Free Setup</li>
                  <li>10 Users</li>
                  <li>25 Projects</li>
                  <li>10 GB Storage</li>
                  <li>Nice Features</li>
                  <li>5 Database</li>
                  <li>10 User Accounts</li>
                </ul>
              </li>
              <li class="button"><a href="#">SIGN UP</a></li>
            </ul>
          </div>
        </div>
        <div class="span4 animate0">
          <div class="plans">
            <ul class="planContainer">
              <li class="title"> <i><img src="images/glob.png" alt=""></i>
                <h3>BUSINESS</h3>
              </li>
              <li class="price">
                <h1><sup>$</sup>99<span>/month</span></h1>
              </li>
              <li>
                <ul class="options">
                  <li>Free Setup</li>
                  <li>20 Users</li>
                  <li>50 Projects</li>
                  <li>50 GB Storage</li>
                  <li>Nice Features</li>
                  <li>15 Database</li>
                  <li>25 User Accounts</li>
                </ul>
              </li>
              <li class="button"> <a href="#">SIGN UP</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="parallax5">
    <div class="container">
      <h1 class="animated">@CUBE+ <a href="#" class="btn">FOLLOW US</a></h1>
      <h3 class="animate0">Worth reading: Safari on iOS 7 and HTML5: problems, 
changes and new APIs<br>
        http://bsa.ly/3dob</h3>
      <h4 class="animate1">3 hours ago</h4>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="contact">
    <div class="head">
      <h1>CONTACT US</h1>
      <a href="#contact" class="next-section contact animate2">
<i class="icon-double-angle-down"></i></a> </div>
    <div class="container">
      <div class="row-fluid">
        <div class="page_title">
          <p class="border animate0"><span>GET IN TOUCH WITH US</span> </p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="span4 animate2">
          <p>by email:<br>
            <strong>hello@cubeplus.com</strong></p>
        </div>
        <div class="span4 animate1">
          <p>by call:<br>
            <strong>+1 2340 123456</strong></p>
        </div>
        <div class="span4 animate2">
          <p>by location:<br>
            <strong>Level 13, 2 Elizabeth ST, <br>
            Melbourne, Victoria 3000,<br>
            Australia</strong></p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="page_title animated">
          <p  class="border"> <span> SEND US A MESSAGE </span></p>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <div class="span8 offset2">
          <div class="mailFromDiv">
            <form name="mailform" id="mailform" method="post"
 enctype="multipart/form-data"  >
              <input type="text" name="name" id="name"
 placeholder="Full Name" required class="animated">
              <input type="email" name="email" id="email" 
placeholder="Email address" required class="animate0">
              <textarea name="textarea" id="textarea" 
placeholder="Message" rows="5" required class="animated"></textarea>
              <input type="button" value="SEND" 
class="submit animate0" onClick="ValiDate()">
            </form>
            <div class="error"></div>
          </div>
          <div class="mailSuccessDiv" > Your Message Sent Successfully!!! </div>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row-fluid">
        <ul class="social_link animate0">
          <li><a href="https://www.facebook.com/" >
<img src="images/social_icon/facebook.png" alt="" class="soc valign"></a></li>
          <li><a href="https://twitter.com/" >
<img src="images/social_icon/twiter.png" alt="" class="soc valign"></a></li>
          <li><a href="https://plus.google.com/‎">
<img src="images/social_icon/google+.png" alt="" class="soc valign"></a></li>
          <li><a href="http://www.rssboard.org">
<img src="images/social_icon/rss.png" alt="" class="soc valign"></a></li>
          <li><a href="http://www.linkedin.com">
<img src="images/social_icon/in.png" alt="" class="soc valign"></a></li>
          <li><a href="http://dribbble.com/">
<img src="images/social_icon/dribbble.png" alt="" class="soc valign"></a></li>
        </ul>
      </div>
    </div>
  </div>
  <footer>
    <div class="footer_top">
      <div class="content">
        <h1 class="foot_logo animate0"><img src="images/logo-2.png" alt=""></h1>
        <p class="copyright animated">© 2013  All rights reserved.</p>
      </div>
    </div>
    <div class="footer_bottom"> <a href="#home" class="top-section home animate2">
<i class="icon-double-angle-up"></i></a> </div>
  </footer>
</div>

style.css

@charset "utf-8";
/* CSS Document */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CUBE+ STYLESHEET
by Pixelcoder.net
Date: 28/09/2013
~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
    color: #777777;
    font-family: 'Lato', sans-serif;
    padding-bottom: 0;
}
/* CHANGEABLE STYLES
    -------------------------------------------------- */
h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    font-weight: 300;
}
h1 {
    font-size: 40px;
    margin: 0;
}
h2 {
    color: #2A323A;
    font-size: 36px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 20px;
}
p {
    font-family: lato;
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 10px;
    line-height: 24px;
}
 a:hover:after span {
}
a {
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
a:focus {
    outline: medium none;
    outline-offset: 0;
}
a:hover, a:focus, a {
    text-decoration: none;
}
ul {
    list-style: none outside none;
    margin: 0;
}
ul:after {
    clear: both;
    content: "";
    display: block;
}
li {
    font-weight: normal;
    line-height: 20px;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
img {
    max-width: 100%;
}
*::-moz-selection {
 color: #00aeef;
}
/* GLOBAL STYLE END
-------------------------------------------------- */

/* customizable Style */
#wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
section {
    position: relative;
    text-align: center;
}
.center {
    text-align: center;
}
h1.center {
    margin: 5px auto;
    text-align: center;
}
.valign {
    vertical-align: middle;
}
.left {
    float: left !important;
}
.right {
    float: right !important;
}
.left-al {
    text-align: left !important;
}
.right-al {
    text-align: right !important;
}
.clear:after {
    clear: both;
    content: "";
    display: block;
}
.m20 {
    margin: 20px 0;
}
.m20t {
    margin: 20px 0 0;
}
.clear {
    clear: both;
}
.global-color {
    color: #5a5a5a;
}
.global-color a {
    color: #5a5a5a;
}
.first {
    margin-left: 0px!important;
}
.relative {
    position: relative;
}
/*Transition Animation*/
a, .item_box .icon, .team, .team .social, .team .social a, .service_icon, 
.service_icon img, .service_hover, .carousel-control, .carousel, nav#primary, 
.mailFromDiv, .mailSuccessDiv, .error, .er {
    -webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -ms-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 HEADER SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.header {
    position: relative;
    width: 100%;
    background: url(../images/headerbg.jpg) center top no-repeat fixed;
    border-bottom: 4px solid #3498db;
}
/* Logo
-------------------------------------------------- */

#primary .logo {
    margin: 0;
    padding: 0;
    display: none;
}
.logo {
    float: left;
    height: 100%;
    margin-top: 45px;
    margin-bottom: 40px;
}
.logo img {
    display: block;
    max-height: 100%;
    width: auto;
}
.logo a {
    float: left;
    font-size: 40px;
    line-height: 40px;
    font-weight: 300;
    text-align: left;
}
.logo ._bg {
    background: none repeat scroll 0 0 #3398da;
    color: #FFFFFF;
    float: left;
    font-weight: 300;
    padding: 3px 10px 7px;
    position: relative;
    z-index: 1;
}
.logo ._u {
    float: left;
    color: #3398da;
    margin-left: -11px;
    padding: 3px 0 7px;
}
.logo ._u strong {
    color: #fff;
    font-weight: 300;
}
/*************************************************
Main Nav Style
*************************************************/
#primary {
    position: fixed;
    top: 50px;
    right: 30px;
    z-index: 100000;
}
#primary li:before {
    border-right: 2px solid #3498DB;
    content: "";
    height: 24px;
    position: absolute;
    right: 0.21em;
    top: 16px;
}
#primary li:last-child:before {
    height: 0;
}
#primary li {
    display: list-item;
    height: 20px;
    list-style: none outside none;
    margin-top: 15px;
    position: relative;
    text-align: right;
}
#primary a {
    display: block;
    text-align: right;
    font-size: 11px;
    color: #69b4e4;
}
#primary li a:hover, nav#primary li.active a {
    color: #34495e;
}
#primary a:before {
    float: right;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    font-family: 'FontAwesome';
    content: "\f10c";
    font-size: 14px;
    color: #3498db;
}
#primary li.active a:before {
    content: "\f111";
}
a.next-section {
    background: none repeat scroll 0 0 #3498DB;
    bottom: 0;
    color: #FFFFFF;
    font-size: 18px;
    left: 50%;
    margin-left: -20px;
    min-width: 12px;
    min-height: 21px;
    padding: 10px 15px;
    position: absolute;
    z-index: 100;
}
a.top-section {
    float: left;
    background: none repeat scroll 0 0 #3498DB;
    left: 50%;
    top: 0;
    color: #FFFFFF;
    font-size: 18px;
    min-width: 12px;
    min-height: 21px;
    margin-left: -20px;
    padding: 10px 15px;
    position: relative;
    z-index: 100;
}
#about a.next-section, #services a.next-section, #portfolio a.next-section, 
#blog a.next-section, #priceplans a.next-section, #contact a.next-section {
    bottom: -40px;
}
.navbar-inverse .btn-navbar {
    margin: 0;
    background: #005a88;
    border: none;
}
.navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:focus, 
.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, 
.navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar[disabled] {
    color: #ffffff;
    background-color: #0084c8;
 *background-color: #0084c8;
}
.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active {
    background-color: #0084c8 \9;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Carousel base clas
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#myCarousel {
    position: relative;
    overflow: hidden;
    max-height: 620px;
}
#myCarousel .carousel {
    position: relative;
}
#myCarousel .carousel .container {
    position: relative;
    right: 0;
    top: 0;
    left: 0;
}
#myCarousel .carousel-control {
    background-color: transparent;
    border: 0;
    font-size: 80px;
    margin-top: 0;
    font-family: 'FontAwesome';
}
#myCarousel .slide-01 {
    margin: 0 auto;
}
#myCarousel .slide-02 {
    float: right;
    margin-left: 10px;
    margin-bottom: 50px;
    width: 50% !important;
}
#myCarousel .carousel-caption {
    background-color: transparent;
    position: static;
    top: 0 !important;
    padding: 0;
}
#myCarousel .caption2 {
    float: left;
    width: 45%;
    text-align: center;
    padding: 40px 0 0 0;
}
#myCarousel .carousel-caption h1, #myCarousel .carousel-caption .lead {
    color: #fff;
}
#myCarousel .carousel-caption h1 {
    font-family: 'Lato', sans-serif;
    font-size: 44px;
    line-height: 44px;
    font-weight: 400;
    margin-bottom: 10px;
}
#myCarousel .carousel-caption p {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 58px;
}
#myCarousel .caption2 h1 {
    margin-bottom: 30px;
}
#myCarousel .caption2 p {
    margin-bottom: 60px;
}
#myCarousel .carousel-caption .btn {
    margin-top: 10px;
}
.buy-now {
    color: #ffffff;
    background: #3498db;
    text-shadow: none;
    font-size: 16px;
    margin: 5px;
    padding: 11px 19px;
}
.buy-now:hover, .buy-now:focus, .buy-now:active, .buy-now.active, .buy-now.disabled,
 .buy-now[disabled] {
    color: #ffffff;
    background: #1d85ca;
}
.learn-more {
    color: #ffffff;
    background: #34495e;
    text-shadow: none;
    font-size: 16px;
    margin: 5px;
    padding: 11px 19px;
}
.learn-more:hover, .learn-more:focus, .learn-more:active, .learn-more.active, 
.learn-more.disabled, .learn-more[disabled] {
    color: #ffffff;
    background: #306396;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Responsive Design Content
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#responsive_design {
    background: #34495e url(../images/responsive.jpg) 50% 0 no-repeat fixed;
    min-height: 510px;
    position: relative;
}
#responsive_design h2 {
    font-size: 32px;
    color: #fff;
    text-align: center;
    font-weight: 300;
    margin-top: 50px;
}
#responsive_design .content {
    position: relative;
    top: 105px;
}
#responsive_design ul {
    position: relative;
    width: auto;
    text-align: center;
}
#responsive_design ul li {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    margin: 5px 5px 10px 5px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ABOUT SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#about {
    background: #ffffff;
    position: relative;
    width: 100%;
}
#about .head, #services .head, #portfolio .head, #blog .head, #priceplans .head,
#contact .head {
    position: relative;
    background: #3498db;
    padding: 55px 0;
    min-height: 41px;
    color: #fff;
    margin-bottom: 40px;
    text-align:center;
}
.page_title {
    margin: 45px 0;
    position: relative;
    width: 100%;
    text-align: center;
}
.page_title .border {
    margin: 0 auto;
    padding: 0 10px;
    display: inline-block;
    background: url(../images/border.png) left bottom repeat-x;
}
.page_title .border span {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #33485e;
    padding-bottom: 10px;
    border-bottom: 3px solid #fff;
    display: inline-block;
    min-width: 120px;
    margin: 0;
}
#about .message {
    margin-bottom: 60px;
}
.item_box {
    background: url(../images/white_bg.png) top center no-repeat #f0f0f0;
    min-height: 300px;
    border-bottom: 1px solid #aaaaaa;
    margin-bottom: 40px;
    padding: 20px;
    text-align: center;
    float: left;
}
.item_box .icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center top;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s; /* Safari */
}
.item_box:hover .icon {
    background-position: center bottom;
}
.item_box .icon.user {
    background-image: url(../images/user.png);
}
.item_box .icon.rocket {
    background-image: url(../images/rocket.png);
}
.item_box .icon.hand {
    background-image: url(../images/hand.png);
}
.item_box h3 {
    margin: 70px 0 20px;
    color: #3498db;
    font-weight: 300;
}
.item_box p {
    font-size: 14px;
    color: #777777;
    line-height: 22px;
}
.item_box:hover {
    border-color: #3498db;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    TEAM SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
.team {
    position: relative;
    width: 100%;
    background: #fff;
    margin-bottom: 70px;
    -webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -ms-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}
.team .member_photo {
    width: 100%;
    position: relative;
}
.team .social {
    position: relative;
    background: #fff;
    overflow: hidden;
    height: 0;
}
.team:hover .social {
    height: 70px;
    opacity: 1;
}
.team .social ul {
    width: 100%;
    padding: 10px 0;
    position: relative;
    text-align: center;
}
.team .social ul li {
    display: inline-block;
    list-style: none;
}
.team .social ul li a {
    display: inline-block;
    color: #c4e2f4;
    font-size: 36px;
    margin: 5px;
    line-height: 20px;
}
.team .social ul li a:hover {
    color: #3498db;
}
.team .member_info {
    position: relative;
    background: #f6f6f6;
    padding: 20px 0;
    text-align: center;
}
.team .member_info h4 {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 7px;
}
.team .member_info i {
    font-size: 14px;
    font-style: italic;
    color: #3398da;
}
.team:hover .member_info {
    background: #3498db;
    color: #fff;
}
.team:hover .member_info h4, .team:hover .member_info i {
    color: #fff;
}
.skill {
    background: #f0f0f0;
    padding: 20px 0;
}
.skill_graph {
    margin: 10px 0;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PARALLAX 01
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#parallax1 {
    width: 100%;
    position: relative;
    height: 400px;
    text-align:center;
    background: #2a3b4b url(../images/parallax-01.jpg) 50% 0 no-repeat fixed;
}
#parallax1 h2 {
    position: relative;
    padding-top: 130px;
    font-weight: 300;
    color: #fff;
    line-height: 50px;
}
#parallax1 span {
    display: block;
    font-size: 18px;
    padding-top: 30px;
    color: #fff;
    font-weight: 300;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    SERVICES SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#services {
    background: #fff;
    position: relative;
    width: 100%;
    padding-bottom: 30px;
}
#services .message {
    position: relative;
    margin-bottom: 70px;
}
#services blockquote {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    line-height: 30px;
    border: none;
}
.postby {
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
}
.postby strong {
    color: #3398d9;
}
.service_box {
    width: 100%;
    height: 215px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
    float: left;
}
.service_normal {
    position: relative;
    width: 100%;
    float: left;
}
.service_icon_wrap {
    float: left;
    position: relative;
    width: 100%;
    min-height: 150px;
    margin-bottom: 20px;
    background: #f0f0f0 url(../images/white_bg.png) center top no-repeat;
}
.service_icon {
    position: relative;
    width: 80px;
    height: 80px;
    left: 50%;
    margin-left: -40px;
    margin-top: 15px;
    overflow: hidden;
}
.service_icon img {
    position: absolute;
    left: 0;
    top: 0;
}
.service_box:hover .service_icon img {
    position: absolute;
    left: 0;
    top: -80px;
}
.service_box h4 {
    font-size: 20px;
    font-weight: 300;
    color: #3498db;
    text-transform: uppercase;
}
.service_hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 215px;
    left: 0;
    background: #3498db;
    color: #fff;
}
.service_hover p, .service_hover a {
    float: left;
    position: relative;
    padding: 30px 15px;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    font-weight: 400;
}
.service_box:hover .service_hover {
    top: 0;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PARALLAX 02
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#parallax2 {
    background: #2a3b4b url(../images/parallax-02.jpg) 50% 0 no-repeat fixed;
    position: relative;
    width: 100%;
    text-align: left;
}
#parallax2 .content {
    position: relative;
    padding: 50px 0;
    width: 100%;
    min-height: 500px;
}
#iphone {
    position: absolute;
    bottom: 0;
    right: 0;
}
#parallax2 h1 {
    text-align: left;
    color: #fff;
    font-weight: 300;
    line-height: 48px;
    padding-bottom: 30px;
}
#parallax2 p {
    font-size: 22px;
    color: #fff;
    line-height: 30px;
    padding-bottom: 70px;
    text-align: left;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PORTFOLIO STYLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#portfolio {
    background: #fff;
    position: relative;
    width: 100%;
}
/*-- PORTFOLIO FILTER NAVIGATION ---*/
.filter {
    width: 100%;
    float: left;
    padding: 40px 0 35px;
}
.filter ul {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
.filter li {
    background: none;
    display: inline;
}
.filter li:last-child {
    background: none;
}
.filter li:last-child a {
    margin: 2px;
}
.filter li a {
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    color: #777777;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 5px;
    padding: 8px 10px 10px 10px;
    display: inline-block;
}
.filter li a:hover {
    color: #fff;
    background-color: #34495e;
}
.filter li.current a {
    color: #fff;
    background-color: #34495e;
}
.filter li span {
    font-size: 11px;
    color: #ccc;
}
/*------------- portfolio image ---------------*/
.portfolio-grid {
    float: left;
    width: 100%;
    margin-bottom: 80px;
}
.portfolio-grid ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.portfolio-grid ul li {
    float: left;
    display: inline;
    position: relative;
    width: 300px;
    margin: 0;
    padding: 0;
    transition: all 500ms ease 0s;
}
.portfolio-grid ul li img {
    float: left;
    transition: all 0.5s ease 0s;
}
.portfolio-grid ul li.col2 {
    width: 220px;
}
.portfolio-grid ul li.col3 {
    width: 340px;
}
.portfolio-grid ul li.col4 {
    width: 500px;
}
.portfolio-grid ul li.col8 {
    width: 640px;
}
.jquery_popup {
    position: relative;
}
.port_left {
    float: left;
    width: 37%;
}
.port_right {
    float: right;
    width: 57%;
    padding: 0 3%;
}
.project {
    position: relative;
}
.project_details h2 {
    color: #fff;
    margin-bottom: 20px;
}
.project_details p {
    color: #fff;
    line-height: 24px;
    margin-bottom: 30px;
}
.pop_image {
    position: relative;
    overflow: hidden;
}
.zoom {
    font-family: 'FontAwesome';
    font-size: 18px;
    color: #fff;
    background: #3498DB;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
}
/*--------------------------------------------------
            PORTFOLIO THUMBNAIL HOVER
---------------------------------------------------*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PARALLAX 03
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#parallax3 {
    width: 100%;
    position: relative;
    text-align:center;
    height: 400px;
    background: #2a3b4b url(../images/parallax-03.jpg) 50% 0 no-repeat fixed;
}
#parallax3 h1 {
    position: relative;
    padding-top: 130px;
    font-weight: 300;
    color: #fff;
    line-height: 50px;
}
#parallax3 ul {
    float: left;
    width: 100%;
    margin: 50px 0;
    padding: 0;
    list-style: none;
    display: block;
}
#clients li {
    float: left;
    font-size: 40px;
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 10px;
    display: block;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    NEWS BLOG
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#blog {
    background: #fff;
    position: relative;
    width: 100%;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PARALLAX 04
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#parallax4 {
    width: 100%;
    position: relative;
    text-align:center;
    height: 400px;
    background: #2a3b4b url(../images/parallax-04.jpg) 50% 0 no-repeat fixed;
}
#parallax4 h1 {
    position: relative;
    font-size: 44px;
    padding-top: 86px;
    font-weight: 300;
    color: #fff;
    line-height: 50px;
    margin-bottom: 30px;
}
#parallax4 h3 {
    font-size: 22px;
    color: #fff;
    line-height: 24px;
    margin-bottom: 50px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PRICE PLANS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    

#priceplans {
    background: #fff;
    position: relative;
    width: 100%;
    padding-bottom: 40px;
}
.plans {
    width: 100%;
    text-align: center;
    margin: 30px 0 50px 0;
    background: #fff;
    color: #777777;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}
.plans:hover {
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .15);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04);
}
.planContainer .title {
    background: #34495e;
    padding: 20px;
    color: #fff;
}
.planContainer .title i {
    position: relative;
    display: block;
    padding-top: 8px;
}
.planContainer .title h3 {
    padding: 5px 0 2px;
}
.planContainer .price {
    padding: 45px 0 38px;
    background: #fff;
}
.planContainer .price h1 {
    font-size: 60px;
    font-weight: 900;
    line-height: 50px;
}
.planContainer .price h1 sup {
    font-size: 15px;
    line-height: 15px;
    font-weight: 300;
    top: -35px;
}
.planContainer .price h1 span {
    font-size: 15px;
    line-height: 15px;
    font-weight: 400;
}
.planContainer .options {
    margin-top: 0;
}
.planContainer .options li {
    padding: 20px 0;
    background: #fff;
}
.planContainer .options li:nth-child(2n+0) {
    background: #f0f0f0;
}
.planContainer .button, #plans .team .button:hover {
    color: #fff;
    background: #34495e;
}
.planContainer .button:hover, #plans .team .button {
    background: #3498db;
}
.planContainer .button a {
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    padding: 25px;
    display: block;
}
#plans .team .title {
    background: #3498db url(../images/new.png) right top no-repeat;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    PARALLAX 04
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
#parallax5 {
    width: 100%;
    position: relative;
    text-align:center;
    height: 400px;
    background: #2a3b4b url(../images/parallax-05.jpg) 80% 0 repeat-y fixed;
}
#parallax5 h1 {
    position: relative;
    font-size: 44px;
    padding-top: 86px;
    font-weight: 300;
    color: #fff;
    line-height: 50px;
    margin-bottom: 50px;
    text-align: left;
}
#parallax5 h3 {
    font-size: 22px;
    color: #fff;
    line-height: 24px;
    margin-bottom: 35px;
}
#parallax5 h4 {
    font-style: italic;
    color: #fff;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    CONTACT SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#contact {
    background: #fff;
    position: relative;
    width: 100%;
    text-align: center;
}
#contact P {
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
#contact P strong {
    font-size: 20px;
    font-weight: 300;
}
.mailFromDiv {
    position: relative;
    overflow: hidden;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
    width: 100%;
    padding: 10px 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #34495e;
    margin-bottom: 10px;
}
#contact input[type="email"] {
    border-bottom: 1px solid #b7dbf2;
}
#contact textarea {
    border-bottom: 1px solid #b7dbf2;
}
#contact input[type="submit"], #contact .submit {
    border: none;
    padding: 10px 20px;
    margin: 10px 0;
    float: right;
    background: #3498db;
    color: #fff;
}
#contact input[type="submit"]:hover, #contact .submit:hover {
    background: #147CC1;
}
/*Error Message*/
.er {
    color: #AB0000 !important;
    border-color: #AB0000 !important;
}
.er:focus {
    color: #0099ff !important;
}
.er:focus {
    color: #0099ff !important;
    border-color: #B7DBF2 !important;
}
#name.er:focus {
    border-color: #34495E !important;
}
.error {
    float: left;
    color: #AB0000;
    font-size: 12px;
    font-weight: bold;
}
.error p {
    text-align: left;
    margin-bottom: 0;
}
/* Congratulation message */
.mailSuccessDiv {
    display: none;
    width: 100%;
    color: #33485E;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}
/*-------------------------------------------------------------*/
.social_link {
    text-align: center;
    min-height: 100px;
    margin: 40px 0 65px 0;
}
.social_link li {
    display: inline-block;
    text-align: center;
    margin: 5px;
}
.social_link li a {
    position: relative;
    overflow: hidden;
    border: 1px solid #ebebeb;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}
.social_link li a:hover {
    border-color: #fff;
    -webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, .1);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    FOOTER SECTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.footer_top {
    float: left;
    width: 100%;
    background: #3498db;
}
.footer_top .content {
    float: left;
    background: #f7f7f7;
    margin-left: 50%;
    width: 50%;
    padding: 50px 0;
}
.foot_logo {
    float: left;
    position: relative;
    margin-left: -40px;
    z-index: 1;
}
.copyright {
    float: right;
    padding-top: 13px;
    margin-right: 50px;
    font-size: 16px;
    color: #777777;
}
.footer_bottom {
    float: left;
    width: 100%;
}
/*~~~~~~~~~~~~~~~~~~~
Test modal
~~~~~~~~~~~~~~~~~~~~~~*/
.test_modal {
    position: absolute;
    z-index: 10000;
    background: #666;
    width: 1000px;
    height: 200px;
}
.foot_absulet {
    position:absolute;
    bottom:0;
    width:100%;}
.error_404 {
    float:left;
    width:100%;
    padding:200px 0;
    min-height:300px;    
    text-align:center;
    font-size:200px;
    color:#F00;
    }
/*```````````````````````     
/* RESPONSIVE CSS
````````````````````````````` */
@media (min-width: 940px) {
#parallax1, #parallax2, #parallax3, #parallax4, #parallax5 {
    background-size: cover;
}
}
@media (max-width: 979px) {
h1 {
    font-size: 2.375em;
    margin: 0;
}
h2 {
    color: #2A323A;
    font-size: 2.137em;
}
h3 {
    font-size: 1.425em;
}
h4 {
    font-size: 1.068em;
}
h5 {
    font-size: .831em;
}
p {
    font-family: lato;
    font-size: .95em;
    font-weight: 300;
    margin: 0 0 10px;
    line-height: 1.425em;
}
/*~~~~~~~~~~~~~~
Slider Carousel
~~~~~~~~~~~~~~~~~~~~~~~~~*/
.carousel .item {
    height: 500px;
}
.carousel img {
    width: auto;/*height: 500px;*/
}
.carousel-caption h1 {
    font-size: 30px;
}
.carousel-control.right {
    right: 0;
}
.carousel-control.left {
    left: 0;
}
/* ~~~
parallax2
~~~~~~~~~~~~~~~*/
#iphone {
    width: 80%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 768px){
#home {
    padding-top: 80px;
}
#home .logo {
    display: none;
}
#primary .logo a {
    font-size: 28px;
    line-height:28px;
}
#primary .logo ._bg {
    padding: 1px 5px 3px;
}
#primary .logo  ._u {
    padding: 1px 0 7px;
}
#primary .logo {
    display: block;
}
#primary {
    top: 0;
    right: 0;
    width: 90%;
    padding: 2% 5%;
    height:35px;
    margin: 0;
    position: fixed;
    background:#0e6dac;
}
#primary .btn-navbar {
    margin:5px;}
#primary li:before {
    display: none;
}
#primary a:before {
    display: none;
}
#primary .nav-collapse {
    background: url(../images/transparent.png) left top repeat;
    width: 100%;
}
#primary ul {
    position: relative;
    overflow: hidden;
}
#primary li {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}
#primary li a {
    min-width: 200px;
    text-align: left;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
#primary li.active, #primary li a.active, #primary li a:hover {
    background: #fff;
}}
@media (max-width: 767px) {

/*~~~~~~~~~~~~~~
 Carosul
~~~~~~~~~~~~~~~*/
.carousel .item {
    max-height: 450px;
    width: 90%;
    padding: 0 5%;
}
.carousel-caption {
    margin-bottom: 5%;
}
#myCarousel .carousel-caption h1 {
    font-size: 30px;
}
#myCarousel .carousel-caption p {
    font-size: 18px;
}
.carousel-caption .lead, .carousel-caption .btn {
    font-size: 14px;
}
.learn-more {
    font-size: 14px;
}
.footer_top .content {
    padding: 20px 0;
}
}
@media (max-width: 480px) {
.carousel .item {
    max-height: 310px;
    width: 90%;
    padding: 0 5%;
}
#myCarousel .carousel-caption h1 {
    font-size: 24px;
    line-height: 26px;
}
.carousel-caption p {
    display: none;
}
#myCarousel .slide-01 {
    bottom: 0;
    margin: 0 auto 0 -50%;
    position: absolute;
    right: 0;
}
#myCarousel .caption2 {
    padding-top: 5px;
}
#myCarousel .caption2 h1 {
    margin-bottom: 10px;
}
.buy-now {
    clear: both;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}
.learn-more {
    clear: both;
    display: inline-block;
    font-size: 12px;
}
#myCarousel .carousel-control {
    top: 15%;
    font-size: 60px;
}
.carousel-control.right {
    right: 10px;
}
.carousel-control.left {
    left: 10px;
}
/* responsive design section*/    
#responsive_design li:nth-child(1) {
    width: 30%;
}
#responsive_design li:nth-child(2) {
    width: 25%;
}
#responsive_design li:nth-child(3) {
    width: 18%;
}
#responsive_design li:nth-child(4) {
    width: 10%;
}
#responsive_design h2 {
    margin-bottom: 50px;
}
#parallax1, #parallax4 {
    height: auto;
    padding: 100px 0;
}
#parallax1 h2 {
    color: #FFFFFF;
    font-weight: 300;
    line-height: 1.5em;
    padding: 0 30px 30px;
    position: relative;
}
#parallax3, #parallax4 {
    height: auto;
    padding: 100px 0 50px;
}
#parallax3 h1, #parallax4 h1 {
    padding-top: 0;
}
#parallax2 h1 {
    line-height:32px;}
#parallax2 p {
    padding-bottom:10px;}
#iphone {
    position:relative;
    width:100%;}

/* portfolio*/
.portfolio-grid ul li.col8 {
    max-width:100%;}
    
/*News*/
.custom_carousel {
    display:none;}    
.social_link {
    min-height:70px;}
.soc {
    width:30px;}
.copyright {
    font-size:12px;
    margin-right: 10px;
}
/*portfolio*/
.filter li a {
    font-size:12px;
    padding:4px 6px 6px 6px;}
.portfolio-grid ul li {
    max-width:50% !important;}
.project_details p {
    display:none;}
    
}
@media (max-width: 320px) {
.carousel .item {
    max-height: 210px;
    width: 90%;
    padding: 0 5%;
}
#myCarousel .carousel-caption h1 {
    font-size: 18px;
    line-height: 18px;
}
.carousel-caption p {
    display: none;
}
#myCarousel .slide-01 {
    bottom: 0;
    margin: 0 auto 0 -50%;
    position: absolute;
    right: 0;
}
#myCarousel .caption2 {
    padding-top: 5px;
}
#myCarousel .caption2 h1 {
    margin-bottom: 10px;
}
.buy-now {
    clear: both;
    font-size: 10px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px;
}
.learn-more {
    clear: both;
    display: inline-block;
    font-size: 10px;
    padding: 5px;
}
#myCarousel .carousel-control {
    top: 15%;
    font-size: 40px;
}
responsive_design {
    padding:70px 0;}
#responsive_design .content {
    top: 20px
}
#responsive_design li:nth-child(1) {
    width: 50%;
}
#responsive_design li:nth-child(2) {
    width: 40%;
}
#responsive_design li:nth-child(3) {
    width: 40%;
}
#responsive_design li:nth-child(4) {
    width: 20%;
}

/*portfolio*/
.filter li a {
    font-size:12px;
    padding:4px 6px 6px 6px;}
.portfolio-grid ul li {
    max-width:50% !important;}
.project_details h2 {
    font-size:18px;
    margin-bottom:10px;}
/*button*/
.btn {
    padding:5px 8px;
    font-size:12px;}
}

script.js

// JavaScript Document

/*~~~~~~~~~~~~~~~~~~~~
Piechart
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
var initCharts = function() {
    // strict mode syntax
    'use strict';
    var charts = $('.percentage');
    charts.easyPieChart({
        animate: 1000,
        scaleColor: false,
        onStep: function(value) {
          this.$el.find('span').text(~~value);
        }
    });
}

/*~~~~~~~~~~~~~~~~~~~~~~
Ready Function
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$(document).ready(function() {    

// strict mode syntax
    'use strict';

//Primary Navigation Script
    $('#nav').onePageNav({
        begin: function() {
        console.log('start')
        },
        end: function() {
        console.log('stop')
        }
    });
    
// Next Session Scroll Animate Script
    $('a.next-section').click(function(){        
    var elementId = $(this).attr('href');   
    $('html, body').animate({ scrollTop: $(elementId).offset().top }, 1000);
    return false;
    });
    
// Top Session Scroll Animate Script
    $('a.top-section').click(function(){
        $('html, body').animate({ scrollTop: 0 }, 1000);
        return false;
        });

//     Popup box
        var i;
        for(i=1; i<=30; i++){
            //alert("jquery_popup"+i);                
        $('.jquery_popup'+ i).popup({
            content        : $('#project'+ i)
        });
        }
        
// Animated popup
        $('.animated_popup').popup({
                        
            show    : function($popup, $back){
            
            var plugin = this,
            center = plugin.getCenter();
            
            $popup
                .css({
                    top     : - $popup.children().outerHeight(),
                    left    : center.left,
                    opacity    : 1
                })
                .animate({top : center.top}, 500, 'easeOutBack', function(){
                    // Call the open callback
                    plugin.o.afterOpen.call(plugin);
                });
            
            }
        });
    
// Call ALL the callbacks
        $('.callback_popup').popup({
            beforeOpen          : function(type){
            console.log('beforeOpen -', type);
            },
            afterOpen           : function(){
            console.log('afterOpen');
            },
            beforeClose         : function(){
            console.log('beforeClose');
            },
            afterClose          : function(){
            console.log('afterClose');
            }
        });
        
        // Different preloader
        $('.preloader_popup').popup({
            preloaderContent    : '<img src="images/preloader.gif" class="preloader">'
        });
        
        // Error popup
        $('.error_popup').popup({            
            error : function(content, type){
            
            // Just call open again, it'll replace the content
            this.open('<h1>ERROR!</h1><p>Content "'+content+'" of type "'+type+'" 
could not be loaded.</p>', 'html');
            }
        });
        
//Fancey box
    $('.fancybox').fancybox();


// Flex Slider

  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 235,
    itemMargin: 0,
    asNavFor: '#slider'
  });
 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
 
 
});
/*~~~~~~~~~~~~~~~~~~~~~~
Onload function
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
//Parallax/
$(window).load(function(){
    $('#responsive_design').parallax('50%',1.5);
    $('#parallax1').parallax('50%',.4);
    $('#parallax2').parallax('50%',.4);
    $('#parallax3').parallax('50%',.4);
    $('#parallax4').parallax('50%',.4);
    $('#parallax5').parallax('50%',.4);
//Clients Logo    
$('#clients').carouFredSel({
        width: '100%',
        scroll: 1,
        mousewheel: true,
        swipe: {
            onMouse: true,
            onTouch: true
            },
        visible: {
                    min: 3,
                    max: 5
            }        
    });
});


//when view section
    
$('.animated').one('inview', function (event, visible) {
    if (visible == true) {
        $(this).addClass('fadeInLeft');
    }
});

$('.animate0').one('inview', function (event, visible) {
    if (visible == true) {
        $(this).addClass('fadeInRight');
    }
});
$('.animate1').one('inview', function (event, visible) {
    if (visible == true) {
        $(this).addClass('fadeInUp');
    }
});
$('.animate2').one('inview', function (event, visible) {
    if (visible == true) {
        $(this).addClass('fadeInDown');
    }
$('.skill').one('inview', function (event, visible){
    if (visible == true) {initCharts()}
});
});

// Email function
function IsEmail(email) {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test(email);
    }
    function ValiDate(){
                
                var name = $('#name').val();
                var email = $('#email').val();
                var textarea = $('#textarea').val();
                var errormessage = '';
                
                if(name == ''){ errormessage = errormessage+'<p>Please enter your 
Fullname.</p>';
                    $('#name').addClass('er');
                    $('.error').fadeIn(1000);
                }
                else{$('#name').removeClass('er');}
                
                if(email == '' ){ errormessage = errormessage+'<p>Please enter your 
Email.</p>';
                    $('#email').addClass('er');
                    $('.error').fadeIn(1000);
                }
                else if(!IsEmail(email)){errormessage = errormessage+'<p>Please enter 
a valid Email.</p>';
                    $('#email').addClass('er');
                    $('.error').fadeIn(1000);
                }
                else{$('#email').removeClass('er');}
                
                if(textarea == ''){errormessage = errormessage+'<p>Please put some 
message.</p>';
                    $('#textarea').addClass('er');
                    $('.error').fadeIn(1000);
                }
                else{$('#textarea').removeClass('er');}
                
                //Ajax colling
                if(errormessage==''){
                 
                   var dataString = 'name='+ name + '&email=' + email + '&text=' + 
textarea;
            
                    $.ajax({
                        type: "POST",
                        url: "email.php",
                        data: dataString,
                        success: function(msg){
                            //$('.mailFromDiv').fadeOut(1000);                            
                            $(".mailFromDiv").animate({height:'0px'}, 500);
                            $('.mailSuccessDiv').fadeIn(1500);
                        }
                    });

                }else{
                    $(".mailFromDiv .error").html(errormessage);
                }
            }

        
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Scroll Function
 ~~~~~~~~~~~~~~~~~~~~~*/
$(window).scroll(function(){
    if ($(window).scrollTop() < 500 && $(window).width() >= 769) {
        $("#primary").css({
                top: '50px'
            })
    }
    else if($(window).scrollTop() > 500 && $(window).width()>= 769) {
        $("#primary").css({
                top: '200px'
            })
    }
    
    else if($(window).scrollTop() > 500 && $(window).width() < 768) {
        $("#primary").css({
                top: '0',
                right:'0'
            })
    }
    
});

email.php

if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['text'];
    
    $to = "admin@example.com";
    // subject
    $subject = 'From Cube+';
    // To send HTML mail, the Content-type header must be set
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

      mail($to, $email, $message, $headers);

}

we used below list of fonts..