P-IRIS

Welcome to P-IRIS.

Hello, firstly I would like to thank you for purchasing " P-IRIS - HTML Template ".

If you have any questions that are beyond the scope of this help file, please feel free to email.

Creator: Ahmed Abbas

Contact: ahmedeabbas@yahoo.com

Created On: 10/01/2014

Installation:

P-IRIS is HTML template so there's no really "installation" required just unzip the main file you've downloaded from wrapbootstrap and after unziping you have your all template ready to be used.

Setting Up The Grid:

Before starting to work deeper with this template, you'll need to know how to use template's grid, it's simple and easy to use. P-IRIS is being build using one of the most popular Framwork, Twitter bootstrap, which means your site container is 12-column grids wide.To make it work without problem you be using columns for everything .

Working With Navigation:

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Your code should look like the following.

              
             <div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand logo" href="index.html">Project name</a> </div>
    <div class="navbar-collapse collapse ">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#top">home</a></li>
        <li><a href="#intro">Services</a></li>
         <li><a href="#third">about</a></li>
        <li><a href="#second">portfolio</a></li>       
        <li><a href="#fourth">projects</a></li>
        <li><a href="#fifth">blog</a></li>
        <li><a href="#six">contact</a></li>
      </ul>
    </div>
  </div>
</div>
            
              

Menu CSS:

Your code should look like the following.

              .navbar-default {
background-color: #fff;
border-bottom: 1px solid #000;
top: 0;
left: 0;
position: fixed;
right: 0;
z-index: 1030;
margin-bottom: 20px;
min-height: 50px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background: #000;
color: #FFF;
margin: 15px 5px;
padding: 1px 5px 0
}
.navbar-default .navbar-nav > li > a {
color: #000;
font-size: 0.91em;
letter-spacing: 0.01em;
text-transform: uppercase;
margin:15px 5px;
padding: 1px 5px 0
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #515151;
color: #FFF;
}
/**small menu**/
.navbar-default .navbar-toggle {
border-color: #2c2c2c;
border: 0 none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #2c2c2c
}
.navbar-toggle .icon-bar {
border-radius: 0;
display: block;
height: 4px;
width: 30px
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #2c2c2c;
border-radius: 0 0 0 0;
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
background-color: #303441
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
background-color: #FFF;
}

             
            
              

Flex slider

Blur Slide Show

Your code should look like the following.

              
             
             
<div class="flexslider">
          <ul class="slides">
            <li><img src="img/slider/1.jpg" alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
            </li>
            <li><img src="img/slider/2.jpg"  alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet.</p>
            </li>
            <li> <img src="img/slider/3.jpg"  alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            </li>
            <li> <img src="img/slider/4.jpg"  alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
            </li>
            <li> <img src="img/slider/5.jpg"  alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
            </li>
            <li> <img src="img/slider/6.jpg"  alt="slider" />
              <p class="flex-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
            </li>
          </ul>
        </div>

              

Your CSS code.

      .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
outline: none;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 53px 0 0;
position: relative;
-webkit-border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
zoom: 1;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px
}
.flex-caption {
background: transparent;
color: #FFF;
font-size: 2.8em;
font-family: ostrich_sansmedium;
letter-spacing: 2px;
font-weight:bold;
left: 5%;
margin-bottom: 0;
max-width: 50%;
padding: 20px;
position: absolute;
text-transform: uppercase;
bottom: 18%;
z-index: 500;
text-shadow: 3px 2px 0 rgba(0, 0, 0, 0.3)
}
/* Direction Nav */
.flex-direction-nav a {
background: url("../img/bg_direction_nav.png") no-repeat scroll 5px 0 #2c2c2c;
cursor: pointer;
display: block;
height: 47px;
margin: -20px 0 0;
opacity: 0;
position: absolute;
text-indent: -9999px;
top: 50%;
width: 44px;
}
.flex-direction-nav .flex-next {
background-position: -57px 0;
right: 0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.flex-direction-nav .flex-prev {
left: 0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.flexslider:hover .flex-next {
opacity: 0.5;
right: 30px;
}
.flexslider:hover .flex-prev {
opacity: 0.5;
left: 30px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
opacity: .7;
}
.flex-direction-nav .disabled {
opacity: .3!important;
filter:alpha(opacity=30);
cursor: default;
}
.flex-caption {
background: rgba(0, 0, 0, 0.5);
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
display: none;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .active {
opacity: 1;
cursor: default;
}
@media (min-width: 768px) {
.flex-caption {
font-size:1.5em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3)
}
}
@media (min-width: 320px) and (max-width: 769px) {
.flex-caption {
font-size:.9em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3)
}
}
 @media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
left: 0;
}
.flex-direction-nav .flex-next {
right: 0;
}
}

              

Portfolio slider

Lean Slider

Your code should look like the following.

		<section class="grid_gallery">
      <ul id="gallery">
        <li id="fullPreview"></li>
        
        <!-- 1 -->
        <li> <a href="img/full/1.jpg"></a> <img data-original="img/thumb/1.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 2 -->
        <li> <a href="img/full/2.jpg"></a> <img data-original="img/thumb/2.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 3 -->
        <li> <a href="img/full/3.jpg"></a> <img data-original="img/thumb/3.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 4 -->
        <li> <a href="img/full/4.jpg"></a> <img data-original="img/thumb/4.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 5 -->
        <li> <a href="img/full/5.jpg"></a> <img data-original="img/thumb/5.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 6 -->
        <li> <a href="img/full/6.jpg"></a> <img data-original="img/thumb/6.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 7 -->
        <li> <a href="img/full/7.jpg"></a> <img data-original="img/thumb/7.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 8 -->
        <li> <a href="img/full/8.jpg"></a> <img data-original="img/thumb/8.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 9 -->
        <li> <a href="img/full/9.jpg"></a> <img data-original="img/thumb/9.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 10 -->
        <li> <a href="img/full/10.jpg"></a> <img data-original="img/thumb/10.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 11 -->
        <li> <a href="img/full/11.jpg"></a> <img data-original="img/thumb/11.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 12 -->
        <li> <a href="img/full/12.jpg"></a> <img data-original="img/thumb/12.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 13 -->
        <li> <a href="img/full/13.jpg"></a> <img data-original="img/thumb/13.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 14 -->
        <li> <a href="img/full/14.jpg"></a> <img data-original="img/thumb/14.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 15 -->
        <li> <a href="img/full/15.jpg"></a> <img data-original="img/thumb/15.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 16 -->
        <li> <a href="img/full/16.jpg"></a> <img data-original="img/thumb/16.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 17 -->
        <li> <a href="img/full/17.jpg"></a> <img data-original="img/thumb/17.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 18 -->
        <li> <a href="img/full/18.jpg"></a> <img data-original="img/thumb/18.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 19 -->
        <li> <a href="img/full/19.jpg"></a> <img data-original="img/thumb/19.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
        
        <!-- 20 -->
        <li> <a href="img/full/20.jpg"></a> <img data-original="img/thumb/20.jpg" src="img/white.gif" width="240" height="150" alt="Photo" />
          <div class="overLayer"></div>
          <div class="infoLayer">
            <ul>
              <li>
                <h2> Photo </h2>
              </li>
              <li>
                <p> View Picture </p>
              </li>
            </ul>
          </div>
          <p class="projectInfo"> <strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
        </li>
      </ul>
    </section>

              

Your CSS code.

              
              .portfolio {
padding: 50px 0;
border-bottom: 1px solid #000;
}
section.grid_gallery {
margin: 30px 0;
min-height: 100%;
min-width: 100%;
padding: 0;
text-align: center;
width: 100%;
}
section.grid_gallery #gallery {
padding:0;
}
section.grid_gallery #fullPreview {
padding: 50px 0 30px 0;
display: none;
width:auto
}
section.grid_gallery #fullPreview img, section.grid_gallery #fullPreview .fullCaption {
max-width: 960px;
margin: 0 auto;
display: block;
}
section.grid_gallery #fullPreview .fullCaption {
font-size: 1.1em;
line-height: 1.5;
margin: 0 auto;
padding: 15px 0
}
section.grid_gallery #fullPreview figure {
background-image: url("../img/close_d.png");
background-size: 100%;
width: 30px;
height: 30px;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
opacity: 0.8;
}
section.grid_gallery li {
display: inline-block;
margin: 10px 10px 0 0;
overflow: hidden;
position: relative;
vertical-align: top;
width: 240px;
}
section.grid_gallery li:hover .overLayer {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
opacity: 0.6;
display: block;
background: gray;
}
section.grid_gallery li:hover img {
-webkit-transform: scale(1.1) rotate(3deg);
-moz-transform: scale(1.1) rotate(3deg);
-o-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
}
section.grid_gallery li#fullPreview:hover img {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none
}
section.grid_gallery li:hover .infoLayer {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
opacity: 1;
display: block;
}
section.grid_gallery li a {
display: block;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 240px;
z-index: 6;
}
section.grid_gallery li a.spinner {
background-size: 100%;
background-image: url("../img/loading.gif")no-repeat;
width: 16px;
height: 16px;
position: absolute;
left: 95px;
top: 60px;
}
section.grid_gallery li img {
border: none;
width: auto;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
section.grid_gallery li .overLayer, section.grid_gallery li .infoLayer {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
width: 240px;
height: 150px;
position: absolute;
text-align: center;
opacity: 0;
top: 0;
left: 0;
z-index: 4; /* @end */
}
section.grid_gallery li .overLayer ul, section.grid_gallery li .infoLayer ul {
padding: 30px 0 0 0;
}
section.grid_gallery li .overLayer ul li, section.grid_gallery li .infoLayer ul li {
display: block;
margin: 0 auto;
width: 200px;
padding: 0 0 5px 0;
}
section.grid_gallery li .overLayer ul li:first-child, section.grid_gallery li .infoLayer ul li:first-child {
border-bottom: 2px white solid;
}
section.grid_gallery li .overLayer ul li:last-child, section.grid_gallery li .infoLayer ul li:last-child {
padding: 5px 0 0 0;
text-transform: lowercase;
}
section.grid_gallery li .overLayer ul li h2, section.grid_gallery li .infoLayer ul li h2 {
font-size: 25px;
color:#fff
}
.infoLayer ul li p {
color:#fff
}
section.grid_gallery li .projectInfo {
display: none;
}

         
              

Flex slider

 $(document).ready(function(){
    $('.flexslider').flexslider({
		        animation: "fade",
		        start: function(slider){
		          $('body').removeClass('loading');
		        }
			});
});


              

Portfolio slider

              $(document).ready(function(){   
            $('#gallery').least();
            });
         
              

Google Map

            $(document).ready(function() {	
		 var map;
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : true,
        streetViewControl : false,
        mapTypeControl: true,
        overviewMapControl: false
      });
});
              

contact page validator

             $(document).ready(function() { 
	$("#passion_form").validate();	
    });
              

Nice Scroll Plugin

               $(document).ready(function() { 
$("html").niceScroll();  // The document page (body)
		$(".scroller").getNiceScroll().resize()    });