/*
=====================================================================

*   Sparrow v1.0.1 Layout Stylesheet
*   url: styleshout.com
*   03-05-2014

=====================================================================

   TOC:
   a. Common Styles.
   b. Header Styles.
   c. Intro Section - Main Page.
   d. Info Section - Main Page.
   e. Works Section - Main Page.
   f. Journal Section - Main Page.
   g. Call-To-Action Section - Main Page.
   h. Tweets Section - Main Page.
   i. Blog.
   j. Porfolio.
   k. About.
   l. Contact.
   m. Footer.

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. Common Styles
/* ------------------------------------------------------------------ */

#works {
   background:url(../images/works-bg.jpg);
   padding-top: 48px;
   border-bottom:15px #d5d4d2 solid;

}
#works h1 {
   font: 30px raleway-bold, abc;
   margin-bottom: 36px;
   color: #333;
}

/* Portfolio Content */
#portfolio-wrapper { margin-top: 36px; }
#portfolio-wrapper .columns { margin-bottom: 36px; width:33%;}

.portfolio-item .item-wrap { height:380px;
   background: #fff;
   overflow: hidden;
   border-radius: 3px;

   -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.1);
   -moz-box-shadow:    0px 1px 1px rgba(50, 50, 50, 0.1);
   box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.1);

   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
   position: relative;
   display: block;
}

/* overlay */
.portfolio-item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   border-radius: 3px 3px 0 0;
   background: url(../images/overlay.png) repeat;
}
.portfolio-item .item-wrap .link-icon {
   display: block;
   color: #fff;
   font-size: 40px;
   line-height: 40px;
   text-align: center;

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -18.5px;
   margin-top: -20px;
}

.portfolio-item .item-wrap img {
   vertical-align: bottom;
   border-radius: 3px 3px 0 0;
}

.portfolio-item .portfolio-item-meta { padding: 0px 0;}
.portfolio-item .portfolio-item-meta h5 a {
   font: 16px/18px notosans-bold, abc;
   color: #11ABB0;
   font-weight:bold;
   margin-left: 7%;
   margin-top:-5px;
}
.portfolio-item .portfolio-item-meta p {
   font: 12px/18px notosans-regular, abc;
   color: #999;
   margin: 0 0 5% 7%;
   margin-top:-20px;
}
.portfolio-item .portfolio-item-meta p a { display:inline; font-size:13px; font-weight:bold; color:#666;}
.portfolio-item .portfolio-item-meta p a:hover { color:#11ABB0;}
/* on hover */
.portfolio-item:hover .item-wrap { background-color: #3A3434; }
.portfolio-item:hover .item-wrap a { color:#fff;}
.portfolio-item:hover h5 a { color: #fff !important; }
.portfolio-item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.portfolio-item .dp{ display:inline-block;}
.portfolio-item .dp a { display:inline; font-family:abc; font-size:13px; color:#666;}
.portfolio-item .dp a:hover{ color:#CCC;}
.portfolio-item .porfolio_h { height:300px;}