.grid{position: relative;margin: 0 auto;}
.js .grid::after{content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;background: #252323 url(../img/loading.svg) no-repeat 50% 75px;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;}
.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: -ms-flex;display: -webkit-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: 50%;height: 100%;pointer-events: none;}
.preview::before{content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;background: #1f1d1d;-webkit-transition: opacity 0.6s;transition: opacity 0.6s;}
.preview--open{pointer-events: auto;}
.preview--open::before{opacity: 1;}
.clone{position: fixed;z-index: 110;-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;-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;}
.js .description--grid{display: none;}
.description--preview{font-size: 2em;position: absolute;z-index: 140;width: 100%;left: 100%;top: 0;height: 100%;padding: 0 1em;display: -ms-flex;display: -webkit-flex;display: flex;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-ms-flex-align: start;-webkit-align-items: flex-start;align-items: flex-start;opacity: 0;-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);-webkit-transform: translate3d(0, 30px, 0);transform: translate3d(0, 30px, 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);}
.description--preview h3{font-weight: normal;margin: 0;}
.description--preview p{font-size: 0.65em;max-width: 100%;}
.description--preview p em{color: #5D5D5D;display: block;padding: 0.4em 0 0 0;}
/* Details */
.details{max-width: 100%;/* IE 10-11 bug flexbox */}
.details ul{line-height: 1;position: relative;margin: 0;padding: 0;list-style: none;}
.details ul li{font-size: 0.5em;position: relative;display: inline-block;margin: 0 1em 0 0;padding: 0.15em 0;white-space: nowrap;opacity: 0;color: #9d9d9d;-webkit-transition: -webkit-transform 1s, opacity 1s;transition: transform 1s, opacity 1s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0);}
.preview--open .details ul li{opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.preview--open .details ul li:nth-child(1){-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.preview--open .details ul li:nth-child(2){-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.preview--open .details ul li:nth-child(3){-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
.preview--open .details ul li:nth-child(4){-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
.preview--open .details ul li:nth-child(5){-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.details ul li:first-child{font-weight: bold;color: #909090;}
.icon{font-family: 'camera-icons';font-weight: normal;font-style: normal;font-variant: normal;line-height: 1;display: inline-block;vertical-align: middle;text-transform: none;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;speak: none;}
.icon + span{margin-left: 5px;vertical-align: middle;}
.icon-focal_length:before{content: '\e600';}
.icon-exposure_time:before{content: '\e601';}
.icon-iso:before{content: '\e602';}
.icon-camera:before{content: '\e603';}
.icon-aperture:before{content: '\e604';}
.details .icon{margin-right: 5px;color: #77d45b;}
/* Close button */
.action{font-size: 1.5em;margin: 0;padding: 0;cursor: pointer;vertical-align: top;color: #6bd68a;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: 1;-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;top:20px; right:20px;color: #fff; font-family:'Microsoft YaHei' !important;}

@media screen and (max-width: 40em) {
	.description--preview h3 {
		font-size: 0.5em;
	}
	.description--preview p,
	.details {
		display: none;
	}
}