html{/* killing 300ms touch delay in IE */
	-ms-touch-action:manipulation;
	touch-action:manipulation;
}
#works{position:relative;text-align:center;padding:0 1em;}
#works ul{margin-bottom:3em;}
#works li{display:inline-block;margin:0.625em; /* 10 */}
#works img {
	width:11em;
	height:11em;
	border-color:#eee;
	border:0.625em solid rgba(255,255,255,.5); /* 10 */

	-webkit-box-shadow:0 0 0.313em rgba(0,0,0,.05); /* 5 */
	-moz-box-shadow:0 0 0.313em rgba(0,0,0,.05); /* 5 */
	box-shadow:0 0 0.313em rgba(0,0,0,.05); /* 5 */

	-webkit-transition:-webkit-box-shadow .3s ease, border-color .3s ease;
	-moz-transition:-moz-box-shadow .3s ease, border-color .3s ease;
	-ms-transition:-ms-box-shadow .3s ease, border-color .3s ease;
	-o-transition:-o-box-shadow .3s ease, border-color .3s ease;
	transition:box-shadow .3s ease, border-color .3s ease;
}
#works img:hover {
	border-color:#ffffff;
	-webkit-box-shadow:0 0 0.938em rgba(0,0,0,.25); /* 15 */
	-moz-box-shadow:0 0 0.938em rgba(0,0,0,.25); /* 15 */
	box-shadow:0 0 0.938em rgba(0,0,0,.25); /* 15 */
}

/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox {cursor:pointer;position:fixed;z-index:10000;
	-ms-touch-action:none;
	touch-action:none;
	-webkit-box-shadow:0 0 3.125em rgba(0,0,0,.75); /* 50 */
	-moz-box-shadow:0 0 3.125em rgba(0,0,0,.75); /* 50 */
	box-shadow:0 0 3.125em rgba(0,0,0,.75); /* 50 */
}

/* WITH OVERLAY */
#imagelightbox-overlay {background-color:#ffffff;background-color:rgba(255,255,255,.9);position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0;}

/* WITH "CLOSE" BUTTON */
#imagelightbox-close {
	width:2.5em;height:2.5em;text-align:left;text-indent:-9999px;
	background-color:#666666;position:fixed;z-index:10002;
	top:2.5em;right:2.5em;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	-webkit-transition:color .3s ease;
	-moz-transition:color .3s ease;
	-ms-transition:color .3s ease;
	-o-transition:color .3s ease;
	transition:color .3s ease;
}
#imagelightbox-close:hover {background-color:#111111;}
#imagelightbox-close:before, #imagelightbox-close:after	{
	width:2px;
	background-color:#fff;
	content:'';
	position:absolute;
	top:20%;
	bottom:20%;
	left:50%;
	margin-left:-1px;
}
#imagelightbox-close:before {
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
#imagelightbox-close:after {
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

#imagelightbox-overlay,#imagelightbox-close {
	-webkit-animation:fade-in .25s linear;
	-moz-animation:fade-in .25s linear;
	-o-animation:fade-in .25s linear;
	animation:fade-in .25s linear;
}
@-webkit-keyframes fade-in {
	from	{ opacity:0; }
	to		{ opacity:1; }
}
@-moz-keyframes fade-in {
	from	{ opacity:0; }
	to		{ opacity:1; }
}
@-o-keyframes fade-in {
	from	{ opacity:0; }
	to		{ opacity:1; }
}
@keyframes fade-in {
	from	{ opacity:0; }
	to		{ opacity:1; }
}

@media only screen and (max-width:41.250em) /* 660 */ 
{
	#works {width:100%;}
	#imagelightbox-close {top:1.25em;right:1.25em;}
	#imagelightbox-nav {bottom:1.25em;}
}


@media screen and (max-width:800px) {
	#works li{margin:0.2em;}
	#works img {
		width:5em; /* 140 */
		height:5em; /* 140 */
	}
}

@media screen and (max-width:380px) {
	header{vertical-align:middle;}
	#works{padding:0 0.5em;}
	#works ul{margin-bottom:3em;padding:0.8em 0em;}
	#works li{margin:0.1em;padding:0.2em 0.1em;}
	#works img {
		width:2.5em; /* 140 */
		height:2.5em; /* 140 */
	}
}