paspartou.css

#paspartou {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../images/loading.gif') center no-repeat #000;
	z-index: 1000;
	transition: all ease 300ms;
}

#paspartou.active {
	display: block;
}

#paspartou button {
	position: absolute;
	top: 50%;
	width: 1.5em;
	margin-top: -1.25em;
	padding-bottom: .1em;
	background: #000;
	background: rgba(0, 0, 0, .5);
	border: 1px solid #000;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: .25em;
	color: #fff;
	font-family: 'Arial Unicode MS', 'Lucida Sans', Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 2.2em;
	text-align: center;
	z-index: 2;
	cursor: pointer;
	transition: all ease 200ms;
}

#paspartou button:hover {
	border: 1px solid  rgba(255, 255, 255, .5);
	box-shadow: 0 0 .25em rgba(255, 255, 255, .5);
}

#paspartou button:active {
	box-shadow: inset 0 0 .25em rgba(255, 255, 255, .5);
}

#paspartou #prev {
	left: .5em;
}

#paspartou #next {
	right: .5em;
}

#paspartou #close {
	top: .5em;
	right: .5em;
	margin: 0;
	height: 1.5em;
	line-height: 1.4em;
}


#paspartou > div {
	display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
	display: -moz-box;      /* OLD: Firefox (buggy) */
	display: -ms-flexbox;   /* MID: IE 10 */
	display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
	display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

	width: 100%;
	height: 100%;

	-webkit-box-align: center; -moz-box-align: center; /* OLD… */
	-ms-flex-align: center; /* You know the drill now… */
	-webkit-align-items: center;
	align-items: center;

	-webkit-box-pack: center; -moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;

	text-align: center;
}

#paspartou > div > div {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	text-align: center;
	margin: 0 auto;
}

#paspartou img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	max-height: 100vh;
	transition: all ease 200ms;
}

#paspartou .hidden {
	opacity: 0;
}

#paspartou button.hidden {
	cursot: default;
	pointer-events: none;
}

#paspartou p {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: .5em 0;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	transition: all 200ms ease 200ms;
}

#paspartou img.hidden + p {
	opacity: 0;
	transition: all 200ms ease 0;
}

#paspartou p:empty {
	opacity: 0;
}