/* Filterable Portfolio Stylesheet */


/* Simple Reset
------------------------------------------------------------ */
html, body, div,  h2, ul, li, dl, dd, dt, p { margin: 0; padding: 0; }
ul { list-style: none; }


/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Quattrocento);


/* Custom Classes
------------------------------------------------------------ */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


/* General Styles
------------------------------------------------------------ */

h1, h2 { font-weight: normal; }




/* Filter */
dl { margin-bottom: 3em; color: #000; }
dt, dd { float: left; }
dt { margin-right: 5px; }
.filter li { float: left; }
.filter li:after { content: "/"; }
.filter li:last-child:after { content: ""; }
.filter a { padding: 0 10px; 
letter-spacing: 5px;
cursor: pointer;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
line-height: 53px;
font-size: 16px;
color: #000;
font-family: 'Open Sans Condensed','Arial Narrow', serif;
line-height: 30px;
text-align: center; }
.filter a:hover, .current a { color: #0092D6; }

/* Portfolio Items */
.portfolio li { float: left; margin-right: 10px; margin-bottom: 2em; border: 0px solid #ccc;  }

.portfolio a { display: block;
position: relative;
padding: 0px;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
border-top: 0px solid #fff;

border-right: 0px solid #fff;
 }


.portfolio img { width: 250px; height:375px; display: block; 	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	
	box-shadow: 0px 0px 1px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);

 }
#wrap-filter { max-width:80%; min-height: 100%; margin:60px auto; padding: 1.5em 20px; overflow: hidden;  -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd;background: rgba(250, 250, 250, 0.1); }

#wrap-sections { max-width:1200px; min-height: 100%; margin:10px auto 50px auto; overflow: hidden;  -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; background: rgba(250, 250, 250, 0.1);}



@media screen and (max-width: 767px) {
h3 { font-size:0.9em; line-height: 2em;  }
#wrap-filter { max-width:100%; min-height: 100%; margin:10px auto; padding:2px 0px; overflow: hidden;  -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; }



#wrap-sections { max-width:100%; min-height: 100%; margin:10px auto 50px auto; overflow: hidden;  -moz-box-shadow: 0 0 5px #ddd; -webkit-box-shadow: 0 0 5px #ddd; box-shadow: 0 0 5px #ddd; background: rgba(250, 250, 250, 0.1);}
}