/*
 * Gallery Categories
 */
#gallery-cats a:hover,
#gallery-cats a:focus {
	outline: none;
}

#gallery-cats a span {
	position: relative;
	display: inline-block;
	padding: 0 14px;
	background: #000;
        border-radius: 30px;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#gallery-cats li a.active span {
	background-color: #ccc;
        color: #000;
}

.csstransforms3d #gallery-cats a span::before {
	position: absolute;
        display: none;
	top: 100%;
	left: 0;
	/*width: 100%;*/
	height: 100%;
	background: #777;
        border-radius: 30px;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
.csstransforms3d #gallery-cats li a.active span::before {
	background-color: #fff;
        color: #000;
}

#gallery-cats a:hover span,
#gallery-cats a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d #gallery-cats a:hover span::before,
.csstransforms3d #gallery-cats a:focus span::before {
	width: 100%;
        display: inline-block;
	background: #111;	
}


/*
 * Common
 */

.og-fullimg {
	position: relative;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
	background: #333;
	overflow: visible;
        margin: 10px 10px;
        height: 400px;
        width: 400px;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;
	direction: ltr;
}

.og-fullimg .slice{
	z-index: 100;
	background-repeat: no-repeat;
	background-color: white;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transition: -webkit-transform 150ms ease-in-out;
	-moz-transition: -moz-transform 150ms ease-in-out;
	-o-transition: -o-transform 150ms ease-in-out;
	-ms-transition: -ms-transform 150ms ease-in-out;
	transition: transform 150ms ease-in-out;
		
}

.og-fullimg div.og-imgback{
	position: absolute;
	right: 0;
	background: #666;
	z-index: 0;
}

.og-imgback span {
        display: block;
        padding: 0px 0px 0px 25px;
        text-align: right;
        color: rgba(255, 255, 255, 0.6);
        margin: 0px 10px;
        font-size: 16px;
        font-weight: bold;
        height: 32px;
}

.og-imgback a {
	display: bock;
	float: right;
        clear: right;
	font-size: 16px;
	color: rgba(255,255,255,0.4);
	height: 20px;
	line-height: 22px;
	text-align: right;
        padding: 0 25px 0 0;
        margin: 10px 10px 0;
        text-decoration: none;
}

.og-imgback a:hover {
	color: #fff;
	border-color: #fff;
}

.og-fullimg .overlay {
	opacity: 0;
	left: 0;
	position: absolute;
	-webkit-transition: opacity 150ms ease-in-out;
	-moz-transition: opacity 150ms ease-in-out;
	-o-transition: opacity 150ms ease-in-out;
	-ms-transition: opacity 150ms ease-in-out;
	transition: opacity 150ms ease-in-out;
}

.og-fullimg:hover .overlay {
	opacity: 1;
}

.og-fullimg img {
	position: absolute;
	z-index: 0;
	-webkit-transition: left 0.3s ease-in-out;
	-o-transition: left 0.3s ease-in-out;
	-moz-transition: left 0.3s ease-in-out;
	-ms-transition: left 0.3s ease-in-out;
	transition: left 0.3s ease-in-out;
}

#gallery-cats { padding: 15px 0 0 0; margin: 0; text-align: center; font-size: 0.6em; }
#gallery-cats li { display: inline-block; padding: 0; margin: 0 8px; }
#gallery-cats li a {
/*	line-height: 44px; */
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	padding: 0px;
        perspective: 1000px;
	position: relative;
	display: inline-block;
	margin: 0;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
/*	font-size: 1.35em; */
}

/*
 * Horizontal
 */

.og-fullimg.horiz {
	width: 400px;
	height: 285px;
        margin: 60px 10px;
}

.og-fullimg.horiz .slice{
	width: 80px;
	height: 100%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
}

.og-fullimg.horiz div.og-imgback{
	width: 50%;
	height: 100%;
}

.horiz .og-imgback span {
        position: absolute;
        bottom: 0;
        right: 0;
}

.og-fullimg.horiz .s2, 
.og-fullimg.horiz .s3, 
.og-fullimg.horiz .s4, 
.og-fullimg.horiz .s5 {
	-webkit-transform: translate3d(80px,0,0);
	-moz-transform: translate3d(80px,0,0);
	-o-transform: translate3d(80px,0,0);
	-ms-transform: translate3d(80px,0,0);
	transform: translate3d(80px,0,0);
}
.og-fullimg.horiz .s1 {
	background-position: 0px 0px;
}
.og-fullimg.horiz .s2 {
	background-position: -80px 0px;
}
.og-fullimg.horiz .s3 {
	background-position: -160px 0px;
}
.og-fullimg.horiz .s4 {
	background-position: -240px 0px;
}
.og-fullimg.horiz .s5 {
	background-position: -320px 0px;
}

.og-fullimg.horiz .overlay {
	width: 80px;
	height: 100%;
}

/*
 * STYLES
 */
.og-fullimg.horiz:hover .s2{
	-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
	-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
	-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
	-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
	transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg);
}
.og-fullimg.horiz:hover .s3, 
.og-fullimg.horiz:hover .s5{
	-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
	-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
	-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
	-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
	transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg);
}
.og-fullimg.horiz:hover .s4{
	-webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
	-moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
	-o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
	-ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
	transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg);
}

.og-fullimg.horiz .s1 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.og-fullimg.horiz .s2 > .overlay {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.og-fullimg.horiz .s3 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}

.og-fullimg.horiz .s4 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.og-fullimg.horiz .s5 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}


/*
 * Vertical
 */

.og-fullimg.vert {
	width: 285px;
	height: 400px;
        margin: 10px 67.5px;
}

.og-fullimg.vert .slice{
	width: 100%;
	height: 80px;
        position: absolute;
        bottom: 200%;
	-webkit-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-o-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	transform-origin: bottom center;
}

.og-fullimg.vert div.og-imgback{
	width: 100%;
	height: 50%;
}

.vert .og-imgback span {
        height: 32px;
}

.og-imgback span.hits {
        background: url(../images/theme/hits.png) left center no-repeat;
}

.og-imgback a.download {
    background: url(../images/theme/download.png) right center no-repeat;
}

.og-imgback a.zoom {
    background: url(../images/theme/zoom.png) right center no-repeat;
}

.og-fullimg.vert .s2, 
.og-fullimg.vert .s3, 
.og-fullimg.vert .s4, 
.og-fullimg.vert .s5 {
	-webkit-transform: translate3d(0,80px,0);
	-moz-transform: translate3d(0,80px,0);
	-o-transform: translate3d(0,80px,0);
	-ms-transform: translate3d(0,80px,0);
	transform: translate3d(0,80px,0);
}
.og-fullimg.vert .s1 {
	background-position: 0px -320px;
        bottom: 0;
}
.og-fullimg.vert .s2 {
	background-position: 0px -240px;
}
.og-fullimg.vert .s3 {
	background-position: 0px -160px;
}
.og-fullimg.vert .s4 {
	background-position: 0px -80px;
}
.og-fullimg.vert .s5 {
	background-position: 0px 0px;
}

.og-fullimg.vert .overlay {
	width: 100%;
	height: 80px;
}

/*
 * STYLES
 */
.og-fullimg.vert:hover .s2{
	-webkit-transform: translate3d(0,81px,0) rotate3d(1,0,0,-45deg);
	-moz-transform: translate3d(0,81px,0) rotate3d(1,0,0,-45deg);
	-o-transform: translate3d(0,81px,0) rotate3d(1,0,0,-45deg);
	-ms-transform: translate3d(0,81px,0) rotate3d(1,0,0,-45deg);
	transform: translate3d(0,81px,0) rotate3d(1,0,0,-45deg);
}
.og-fullimg.vert:hover .s3, 
.og-fullimg.vert:hover .s5{
	-webkit-transform: translate3d(0,81px,0) rotate3d(1,0,0,90deg);
	-moz-transform: translate3d(0,81px,0) rotate3d(1,0,0,90deg);
	-o-transform: translate3d(0,81px,0) rotate3d(1,0,0,90deg);
	-ms-transform: translate3d(0,81px,0) rotate3d(1,0,0,90deg);
	transform: translate3d(0,81px,0) rotate3d(1,0,0,90deg);
}
.og-fullimg.vert:hover .s4{
	-webkit-transform: translate3d(0,81px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,81px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,81px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,81px,0) rotate3d(1,0,0,-90deg);
	transform: translate3d(0,81px,0) rotate3d(1,0,0,-90deg);
}

.og-fullimg.vert .s1 > .overlay {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.og-fullimg.vert .s2 > .overlay {
	background: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -ms-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.og-fullimg.vert .s3 > .overlay {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}

.og-fullimg.vert .s4 > .overlay {
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.og-fullimg.vert .s5 > .overlay {
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}