ul {
    list-style: none;
}

img.thumnail {
	max-width: 300px;
}
@media screen and (min-width:480px) { 
img.thumnail {
	max-width: 330px;
}
}

/* @end */
/* @group Gallery */
section#worksBox {
    min-width: 100%;
    width: 100%;
    min-height: 100%;
    text-align: center;
    margin-bottom: 30px;
 /* @group Fullimage */ /* @end */ /* @group Smallimages */
}
section#worksBox img {
   vertical-align: bottom;
}

section#worksBox #fullPreview {
    background-color: #333333;
    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
    padding: 50px 0 30px 0;
    display: none;
}

section#worksBox #fullPreview img, section#worksBox #fullPreview .fullCaption {
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
    display: block;
}

section#worksBox #fullPreview .fullCaption {
    line-height: 1.6em;
    color: white;
    padding-top:20px;
}

section#worksBox #fullPreview figure {
    background-image: url("/works/img/close.png");
    background-size: 100%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
}

section#worksBox li {
    display: inline-block;
	*display: inline;  
    *zoom: 1; 
    vertical-align: top;
    position: relative;
	margin: 0 auto 1em;
}
@media screen and (min-width:480px) { 
section#worksBox li {
	margin: 0 1em 2em;
}
}

section#worksBox li:hover .overLayer {
    -webkit-transition: opacity 0.4s linear;
    -moz-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    opacity: 0.7;
	-moz-opacity:0.7;
    filter: alpha(opacity=70);
    display: block;
    background-color: #444;
}

section#worksBox li:hover .infoLayer {
    -webkit-transition: opacity 0.4s linear;
    -moz-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    opacity: 1;
    display: block;
}

section#worksBox li a.show {
    display: block;
    width: 290px;
    height: 215px;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 6;
}
@media screen and (min-width:480px) { 
section#worksBox li a.show {
    width: 320px;
    height: 238px;
}
}

section#worksBox li a.spinner {
    background-size: 100%;
    background-image: url("/works/img/spinner.gif");
    width: 50px;
    height: 50px;
    position: absolute;
    left: 125px;
    top: 85px;
}
@media screen and (min-width:480px) { 
section#worksBox li a.spinner {
    left: 140px;
    top: 95px;
}
}

section#worksBox li img {
    border: none;
}
a.show {
    border: 5px solid #ddd;
}

section#worksBox li .overLayer, section#worksBox li .infoLayer {
    -webkit-transition: opacity 0.4s linear;
    -moz-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    width: 300px;
    height: 225px;
    position: absolute;
    text-align: center;
    opacity: 0;
    top: 0px;
    left: 0;
    z-index: 4;
 /* @end */
}
@media screen and (min-width:480px) { 
section#worksBox li .overLayer, section#worksBox li .infoLayer {
    width: 330px;
    height: 248px;
}
}

section#worksBox li .overLayer ul, section#worksBox li .infoLayer ul {
    padding: 25px 0 0 0;
}

section#worksBox li .overLayer ul li, section#worksBox li .infoLayer ul li {
    display: block;
    margin: 0 auto;
    width: 300px;
    padding: 0 0 5px 0;
}
@media screen and (min-width:480px) { 
section#worksBox li .overLayer ul li, section#worksBox li .infoLayer ul li {
    width: 330px;
}
}

section#worksBox li .overLayer ul li:first-child, section#worksBox li .infoLayer ul li:first-child {
    border-bottom: 2px #ddd solid;
	margin-bottom: 0.5em;
}

section#worksBox li .overLayer ul li:last-child, section#worksBox li .infoLayer ul li:last-child {
    padding: 5px 0 0 0;
}

section#worksBox li .overLayer ul li h2, section#worksBox li .infoLayer ul li h2 {
    font-size: 1.15em;
	color: #fff;
}

section#worksBox li .overLayer ul li p, section#worksBox li .infoLayer ul li p {
    font-size: 90%;
	margin: auto;
	width: 85%;
	color: #eee;
}

section#worksBox li .overLayer ul li p.category, section#worksBox li .infoLayer ul li p.category {
    font-family: 'Coda',cursive;
    letter-spacing: 1px;
}

section#worksBox li .projectInfo {
    display: none;
}

p.title {
	padding-top: 0.5em;
}
@media screen and (min-width:480px) { 
p.title {
	padding-top: 0.5em;
	font-family: 'Coda',cursive;
	font-size: 1.1em;
}
}