.grid {	position: relative;	margin: 0 auto;}
.js .grid::after {content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;background-size: 60px auto;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}
.js .grid--loaded::after {opacity: 0;}
.grid__item {width: 270px;padding: 10px;}
.grid__item--current {opacity: 0 !important;}
.img-wrap {	display: block; box-shadow:0px 0px 10px #e5e5e5}
.img-wrap:focus,
.img-wrap:hover {outline: none;}
.img-wrap img {display: block;max-width: 100%;}
.preview {position: fixed;z-index: 1000;top: 0;left: 0;display: -webkit-flex;display: -ms-flex;display: flex;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;	-ms-flex-line-pack: center;-webkit-align-content: center;align-content: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;width: 100%;height: 100%;pointer-events: none;}
.preview--open {pointer-events: auto;}
/* circle overlay (generated SVG) */
.overlay {position: absolute;top: 0;left: 0;pointer-events: none;}
.overlay circle {
	-webkit-transition: fill-opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: fill-opacity 0.3s, transform 0s 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
	fill: #1f1d1d;
	fill-opacity: 0;
}

.preview--open .overlay circle {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	fill-opacity: 1;
}

.clone {
	position: fixed;
	z-index: 110;
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	transition: transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	-webkit-backface-visibility: hidden;
}

.original {
	position: relative;
	z-index: 120;
	display: block;
	object-fit: contain;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-backface-visibility: hidden;
}

.preview--open .animate {
	/* open */
	-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
	transition: transform 0.6s, opacity 0.2s;
}

.animate {
	/* close */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.description {color: #fff; display:none;}

.js .description--grid {
	display: none;
}

.description--preview {
	position: fixed;
	z-index: 140;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 1em;
	text-align: center;
	opacity: 0;
	background: linear-gradient(180deg, transparent, #1f1d1d);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.preview--open .description--preview {
	opacity: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/* Close button */

.action {font-size: 2.5em;margin: 0;padding: 0;cursor: pointer;vertical-align: top;	color: #ffe401;	border: none;background: none;}

.action:hover,
.action:focus {
	color: #6bd68a;
	outline: none;
}

.action--close {
	position: fixed;
	z-index: 150;
	top: 0;
	right: 0;
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(0.6, 0.6, 1);
	transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.text-hidden {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
	color: transparent;
}