.photobox-gallery{ float:right; width:60%; }
.photobox-gallery li{ list-style:none; perspective:100px; -webkit-perspective:100px; margin:1px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
.photobox-gallery li.video::before{ content:'\25BA'; color:#FFF; font-size:20px; height:20px; width:20px; line-height:0.9; position:absolute; bottom:3px; left:4px; z-index:1; background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(0,0,0,0.4); border-radius:0 3px 0 0; pointer-events:none; opacity:0; transition:.5s 0.2s; }
.photobox-gallery li.loaded.video::before{ opacity:1; }
.photobox-gallery a{ display:block; width:75px; height:68px; vertical-align:bottom; overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }
.photobox-gallery a:active, #gallery a:focus{ outline:none; }
.photobox-gallery a img{ min-height:100%; width:100%; transition:.3s ease-out; -webkit-transition:0.3s ease-out; }
.photobox-gallery .loaded a{ -webkit-transform:rotateX(0deg) translate(0,0); transform:rotateX(0deg) translate(0,0); }
.photobox-gallery li.loaded:hover{ z-index:2; transform:scale(1.5); -webkit-transform:scale(1.5); }
.photobox-gallery li.loaded a:hover{ box-shadow:0 0 0 2px #FFF, 0 0 20px 5px #000; transition:.1s; -webkit-transition:0.1s; }
.photobox-gallery li.loaded:hover img{ transform:scale(1.2); -webkit-transform:scale(1.2); }
.photobox-gallery li.loaded.video:hover::before{ opacity:0; }
	
/*------- media queries -----------*/
@media all and (max-width:700px){
	.photobox-gallery li{ margin:0; }
	.photobox-gallery a{ width:55px; height:50px; }
	.photobox-gallery li.loaded:hover img, #gallery li.loaded:hover{ transform:none; -webkit-transform:none; }
}