.grid-gallery ul { 	list-style: none; 	margin: 0; 	padding: 0; }
.grid-gallery figure { 	margin: 0; }
.grid-gallery figure img { 	display: block; 	width: 100%; }
.grid-gallery figcaption h3 { 	margin: 0; 	padding: 0 0 0.5em; }
.grid-gallery figcaption p { 	margin: 0; }
.grid-wrap { 	max-width: 69em; 	margin: 0 auto; 	padding: 0 ; }
.grid { 	margin: 0 auto; }
.grid li { 	width: 25%; 	float: left; 	cursor: pointer; }
.grid figure { 	padding: 10px; 	-webkit-transition: opacity 0.2s; 	transition: opacity 0.2s; }
.grid li:hover figure { 	opacity: 0.7; }
.grid figcaption { 	background: #e4e4e4; 	padding: 25px; }
.slideshow { 	position: fixed; 	background: rgba(0,0,0,0.8); 	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; }
.slideshow-open .slideshow { 	opacity: 1; 	visibility: visible; 	-webkit-transition: opacity 0.2s; 	transition: opacity 0.2s; }
.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; }
.slideshow ul.animatable li { 	-webkit-transition: -webkit-transform 0.5s; 	transition: transform 0.5s; }
.slideshow-open .slideshow ul { 	-webkit-transform: translate3d(0,0,0); 	transform: translate3d(0,0,0); }
.slideshow li { 	 	width: 660px; 	max-height: 600px; height:fit-content; 	position: absolute; 	top: 50%; 	left: 50%; 	margin: -280px 0 0 -330px; 	visibility: hidden; }
.slideshow li.show { 	visibility: visible; }
.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; }
.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; }
.slideshow figure { 	width: 100%; 	height: 100%; 	background: #fff; 	border: 30px solid #fff; 	overflow: hidden; }
.slideshow figcaption { 	 }
.slideshow figcaption h3 { 	font-weight: 300; 	font-size: 200%; }
.slideshow nav span { 	position: fixed; 	z-index: 1000; 	color: #59656c; 	text-align: center; 	padding: 10px; 	cursor: pointer; 	 	 }
.slideshow nav span.nav-prev, .slideshow nav span.nav-next { 	width:25px;height:25px; 	top: 50%; 	-webkit-transform: translateY(-50%); 	transform: translateY(-50%); }
.slideshow nav span.nav-next { 	right: 0; }
.slideshow nav span.nav-prev { 	left: 0; }
.slideshow nav span.nav-close { 	top: 0; 	right: 0; 		color: #31373a; }
.icon {margin:15px;display:inline-block;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}
span.nav-prev {  	background-image: url('prev.svg'); }
span.nav-next  {  	background-image: url('next.svg'); 	}
span.nav-close { border:2px solid #FFF; width:30px;height:30px;border-radius:15px;margin: 10px; background-color:#FFF;padding: 10px; 	background-image: url('close.png'); }
@media screen and (max-width: 60em) {
	.grid li { 		width: 33.3%; 	}
	.slideshow li { 		width: 100%; 		height: 100%; 		top: 0; 		left: 0; 		margin: 0; 	}
	.slideshow li figure img { 		width: auto; 		margin: 0 auto; 		max-width: 100%; 	}
	.slideshow nav span,
	.slideshow nav span.nav-close { 		font-size: 1.8em; 		padding: 0.3em; 	}
	.info-keys { 		display: none; 	}
}
@media screen and (max-width: 35em) { 	.grid li { 		width: 50%; 	} }
@media screen and (max-width: 24em) { 	.grid li { 		width: 100%; 	} }