figure.captions {
position:relative;
margin:0;
overflow:hidden;
display:inline-block;
}

figure.captions img,
figure.captions video {
position:relative;
display:block;
}

figure.captions figcaption {
width:100%;
position:absolute;
padding:20px;
overflow:hidden;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}



/*
Push
---------------------------------------------------------------------------------------------------- */

figure.captions.push img,
figure.captions.push video {
z-index:999;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push figcaption {
width:100%;
height:100%;
top:0;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push:hover img,
figure.captions.push:focus img,
figure.captions.push:hover video
figure.captions.push:focus video {
border-radius:10px;
z-index:0;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Left
---------- */

figure.captions.push.left img,
figure.captions.push.left video {
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.left figcaption {
width:50%;
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.left:hover img,
figure.captions.push.left:hover video
figure.captions.push.left:focus img,
figure.captions.push.left:focus img {
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
-o-transform:translateX(50%);
-ms-transform:translateX(50%);
transform:translateX(50%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.left:hover figcaption,
figure.captions.push.left:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
transform:none;
-o-transform:none;
-ms-transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Right
---------- */

figure.captions.push.right img,
figure.captions.push.right video {
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.right figcaption {
width:50%;
right:0;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
-o-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.right:hover img,
figure.captions.push.right:focus img,
figure.captions.push.right:hover video,
figure.captions.push.right:focus video {
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-o-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.right:hover figcaption,
figure.captions.push.right:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Top
---------- */

figure.captions.push.top img,
figure.captions.push.top video {
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.top figcaption {
height:50%;
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.top:hover img,
figure.captions.push.top:focus img,
figure.captions.push.top:hover video,
figure.captions.push.top:focus video {
-moz-transform:translateY(50%);
-webkit-transform:translateY(50%);
-o-transform:translateY(50%);
-ms-transform:translateY(50%);
transform:translateY(50%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.top:hover figcaption,
figure.captions.push.top:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Bottom
---------- */

figure.captions.push.bottom img,
figure.captions.push.bottom video {
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.bottom figcaption {
height:50%;
top:inherit;
bottom:0;
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
-o-transform:translateY(100%);
-ms-transform:translateY(100%);
transform:translateY(100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.bottom:hover img,
figure.captions.push.bottom:focus img,
figure.captions.push.bottom:hover video,
figure.captions.push.bottom:focus video {
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.push.bottom:hover figcaption,
figure.captions.push.bottom:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Top + left
---------- */

figure.captions.push.top.left img,
figure.captions.push.top.left video {
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.left figcaption {
width:100%;
height:100%;
-moz-transform:translate(-100%,-100%);
-webkit-transform:translate(-100%,-100%);
-o-transform:translate(-100%,-100%);
-ms-transform:translate(-100%,-100%);
transform:translate(-100%,-100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.left:hover img,
figure.captions.push.top.left:focus img
figure.captions.push.top.left:hover video,
figure.captions.push.top.left:focus video {
-moz-transform:translate(100%,100%);
-webkit-transform:translate(100%,100%);
-o-transform:translate(100%,100%);
-ms-transform:translate(100%,100%);
transform:translate(100%,100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.left:hover figcaption,
figure.captions.push.top.left:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}


/*
Top + right
---------- */

figure.captions.push.top.right img,
figure.captions.push.top.right video {
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.right figcaption {
width:100%;
height:100%;
-moz-transform:translate(100%,-100%);
-webkit-transform:translate(100%,-100%);
-o-transform:translate(100%,-100%);
-ms-transform:translate(100%,-100%);
transform:translate(100%,-100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.right:hover img,
figure.captions.push.top.right:focus img
figure.captions.push.top.right:hover video,
figure.captions.push.top.right:focus video {
-moz-transform:translate(-100%,100%);
-webkit-transform:translate(-100%,100%);
-o-transform:translate(-100%,100%);
-ms-transform:translate(-100%,100%);
transform:translate(-100%,100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.top.right:hover figcaption,
figure.captions.push.top.right:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}


/*
Bottom + left
---------- */

figure.captions.push.bottom.left img,
figure.captions.push.bottom.left video {
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.left figcaption {
width:100%;
height:100%;
-moz-transform:translate(-100%,100%);
-webkit-transform:translate(-100%,100%);
-o-transform:translate(-100%,100%);
-ms-transform:translate(-100%,100%);
transform:translate(-100%,100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.left:hover img,
figure.captions.push.bottom.left:focus img
figure.captions.push.bottom.left:hover video,
figure.captions.push.bottom.left:focus video {
-moz-transform:translate(100%,-100%);
-webkit-transform:translate(100%,-100%);
-o-transform:translate(100%,-100%);
-ms-transform:translate(100%,-100%);
transform:translate(100%,-100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.left:hover figcaption,
figure.captions.push.bottom.left:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}


/*
Bottom + right
---------- */

figure.captions.push.bottom.right img,
figure.captions.push.bottom.right video {
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.right figcaption {
width:100%;
height:100%;
-moz-transform:translate(100%,100%);
-webkit-transform:translate(100%,100%);
-o-transform:translate(100%,100%);
-ms-transform:translate(100%,100%);
transform:translate(100%,100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.right:hover img,
figure.captions.push.bottom.right:focus img
figure.captions.push.bottom.right:hover video
figure.captions.push.bottom.right:focus video {
-moz-transform:translate(-100%,-100%);
-webkit-transform:translate(-100%,-100%);
-o-transform:translate(-100%,-100%);
-ms-transform:translate(-100%,-100%);
transform:translate(-100%,-100%);
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}

figure.captions.push.bottom.right:hover figcaption,
figure.captions.push.bottom.right:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.7s ease-in-out;
-webkit-transition:0.7s ease-in-out;
-o-transition:0.7s ease-in-out;
-ms-transition:0.7s ease-in-out;
transition:0.7s ease-in-out;
}



/*
Appear
---------------------------------------------------------------------------------------------------- */

figure.captions.appear figcaption {
visibility:hidden;
opacity:0;
}

figure.captions.appear:hover figcaption,
figure.captions.appear:focus figcaption {
visibility:visible;
opacity:1;
}


/*
Left
---------- */

figure.captions.appear.left figcaption {
width:50%;
height:100%;
left:0;
top:0;
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
-o-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.appear.left:hover figcaption,
figure.captions.appear.left:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Right
---------- */

figure.captions.appear.right figcaption {
width:50%;
height:100%;
right:0;
top:0;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
-o-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%);
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}

figure.captions.appear.right:hover figcaption,
figure.captions.appear.right:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.4s ease-in-out;
-webkit-transition:0.4s ease-in-out;
-o-transition:0.4s ease-in-out;
-ms-transition:0.4s ease-in-out;
transition:0.4s ease-in-out;
}


/*
Top
---------- */

figure.captions.appear.top figcaption {
top:0;
padding:10px;
text-align:center;
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
-moz-transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}

figure.captions.appear.top:hover figcaption,
figure.captions.appear.top:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}


/*
Bottom
---------- */

figure.captions.appear.bottom figcaption {
bottom:0;
padding:10px;
text-align:center;
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
-o-transform:translateY(100%);
-ms-transform:translateY(100%);
transform:translateY(100%);
-moz-transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}

figure.captions.appear.bottom:hover figcaption,
figure.captions.appear.bottom:focus figcaption {
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
-moz-transition:0.3s ease-in-out;
-webkit-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}



/*
Flip
---------------------------------------------------------------------------------------------------- */

figure.captions.flip {
background:none;
border:none;
overflow:visible;
-webkit-perspective:1000;
}

figure.captions.flip img,
figure.captions.flip video {
z-index:999;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
-webkit-transition:0.4s linear;
}

figure.captions.flip figcaption {
height:100%;
top:0;
z-index:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
-webkit-transition:0.4s linear;
}

figure.captions.flip:hover img,
figure.captions.flip:focus img,
figure.captions.flip:hover video,
figure.captions.flip:focus video {
z-index:0;
}

figure.captions.flip:hover figcaption,
figure.captions.flip:focus figcaption {
z-index:999;
}


/*
Horizontal
---------- */

figure.captions.flip.horizontal figcaption {
-webkit-transform:rotateX(180deg);
}

figure.captions.flip.horizontal:hover img,
figure.captions.flip.horizontal:focus img,
figure.captions.flip.horizontal:hover video,
figure.captions.flip.horizontal:focus video {
-webkit-transform:rotateX(-180deg);
}

figure.captions.flip.horizontal:hover figcaption,
figure.captions.flip.horizontal:focus figcaption {
-webkit-transform:none;
}


/*
Vertical
---------- */

figure.captions.flip.vertical figcaption {
-webkit-transform:rotateY(-180deg);
}

figure.captions.flip.vertical:hover img,
figure.captions.flip.vertical:focus img,
figure.captions.flip.vertical:hover video,
figure.captions.flip.vertical:focus video {
-webkit-transform:rotateY(180deg);
}

figure.captions.flip.vertical:hover figcaption,
figure.captions.flip.vertical:focus figcaption {
-webkit-transform:none;
}