﻿
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	float: left;
}

.grid-gallery figure {
	margin: 0;
}

	.grid-gallery figure img {
		display: block;
		width: 100%;
		opacity: 1;
	}

	.grid-gallery figure:hover {
		opacity: 1
	}

.grid-gallery figcaption h3 {
	margin: 0;
	padding: 0 0 0.5em;
}

.grid-gallery figcaption p {
	margin: 0;
}

.grid-wrap {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.grid-gallery .grid {
	margin: 0 auto;
	max-width: 100%;
}

.drop .grid-gallery .grid li {
	width: 18.9%;
}

	.grid-gallery .grid li {
		width: 32.9%;
		float: left;
		cursor: pointer;
		overflow: hidden;
		margin: 0.2%;
	}

	.grid-gallery .grid figure {
		padding: 8px;
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	.grid-gallery .grid li:hover figure {
		opacity: 1;
	}

	.grid-gallery .grid figcaption {
		background: #e4e4e4;
		padding: 25px;
	}

/* Slideshow style */
.grid-gallery .slideshow {
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.grid-gallery .slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.grid-gallery .slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

	.grid-gallery .slideshow ul.animatable li {
		-webkit-transition: -webkit-transform 0.5s;
		transition: transform 0.5s;
	}

.grid-gallery .slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.grid-gallery .slideshow li {
	width: 31%;
	float: left;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: 3px;
	margin: 1%;
}

	.grid-gallery .slideshow li.show {
		visibility: visible;
	}

	.grid-gallery .slideshow li:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(255,255,255,0.8);
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}

	.grid-gallery .slideshow li.current:after {
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
		transition: opacity 0.3s, visibility 0s 0.3s;
	}

.grid-gallery .slideshow figure {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 50px solid #fff;
	overflow: hidden;
}

.grid-gallery .slideshow figcaption {
	padding-bottom: 20px;
}

	.grid-gallery .slideshow figcaption h3 {
		font-weight: 300;
		font-size: 200%;
	}

/* Navigation */
.grid-gallery .slideshow nav span {
	position: fixed;
	z-index: 1000;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

	.grid-gallery .slideshow nav span.nav-prev,
	.grid-gallery .slideshow nav span.nav-next {
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.grid-gallery .slideshow nav span.nav-next {
		right: 0;
	}

	.grid-gallery .slideshow nav span.nav-close {
		top: 0;
		right: 0;
		padding: 0.5em 1em;
		color: #31373a;
	}

@media only screen and (max-width: 901px) {
	.grid-gallery .grid li {
		width: 49.6%;
		margin: 0.2%;
	}
}

@media only screen and (max-width: 549px) {
	.grid-gallery .grid li {
		width: 100%;
		margin: 0;
		margin-bottom: 10px
	}
}
