@font-face
{
font-family: 'Zoom';
src: url('Zoom.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* Miniatures */
.zoom
{
display: inline-block;
overflow: hidden;
cursor: zoom-in;
}
.zoom img {transition: transform 0.25s;}
.zoom:hover {}
.zoom:hover img {transform: scale(1.1);}

/* Zoom */
#zoom
{
position: fixed;
overflow: hidden;
z-index: 10;
width: 100vmax;
height: 100vmax;
left: calc((50vmax - 50vw) * -1);
top: calc((50vmax - 50vh) * -1);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: inset 0 0 0 2000px rgba(0,0,0,0.75);
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
transition: transform 0.5s 0.25s, -webkit-transform 0.5s 0.25s, border-radius 0.5s 0.25s;
}
#zoom.on
{
border-radius: 0%;
-webkit-transform: scale(1);
transform: scale(1);
transition: transform 0.5s, -webkit-transform 0.5s, border-radius 0.5s 0.25s, box-shadow 0.5s 0.25s;
}
#zoom #zoom_img
{
position: absolute;
opacity: 0;
width: 100vw;
height: 100vh;
left: calc(50vmax - 50vw);
top: calc(50vmax - 50vh);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: opacity 0.5s;
}
#zoom.on #zoom_img
{
opacity: 1;
transition: opacity 0.5s 0.25s;
}

/* Chargement */
#zoom.charge #zoom_img:before
{
content: 'd';
position: absolute;
width: 80px;
height: 80px;
left: calc(50vw - (80px / 2));
top: calc(50vh - (80px / 2));
color: white;
font-family: Zoom;
font-size: 75px;
text-align: center;
animation: tourne3d 1.5s linear infinite;
}

/* Boutons */
#zoom button
{
display: block;
position: absolute;
box-sizing: border-box;
background: transparent;
border: none;
color: transparent;
font-family: Zoom;
font-size: 50px;
}
#zoom button.off {display: none;}
#zoom button.precedent, #zoom button.suivant
{
width: 20vw;
height: 100%;
top: 0;
transition: padding 0.25s, color 0.25s;
}
#zoom button.precedent
{
left: calc((100vmax - 100vw) / 2);
padding-left: 10vw;
}
#zoom button.suivant
{
right: calc((100vmax - 100vw) / 2);
padding-right: 10vw;
}
#zoom button.precedent:hover, #zoom button.suivant:hover
{
padding: 0px;
color: white;
text-shadow: 0 0 15px rgba(0,0,0,0.25);
}
#zoom button.retour
{
width: 128px;
height: 128px;
left: calc((100vmax - 100vw) / 2);
top: calc((100vmax - 100vh) / 2);
margin-left: 8px;
margin-top: -8px;
border-radius: 100%;
color: white;
text-shadow: 0 0 15px rgba(0,0,0,0.25);
transition: margin 0.25s;
}
#zoom button.retour:hover {margin-left: 0px;}

@media (max-width: 500px) {
	#zoom button {font-size: 30px;}
	#zoom button.precedent, #zoom button.suivant {width: 50vw;}
	#zoom button.retour, #zoom button.retour:hover
	{
	width: 64px;
	height: 64px;
	margin-left: 0px;
	margin-top: 0px;
	}

}