/**
 * CaptionBlur.js
 * A useful jQuery plugin for an image hover caption effect.
 * 
 * Created: 09/18/2013
 * Website: http://erwanlent.com/captionblur
 * Email: erwanlent@gmail.com
 * Description: Adds a captioning system for images with a blur effect.
 * 
 *
 * Special thanks to Neil Carpenter for the CSS guidance.
 */

@import url("http://fonts.googleapis.com/css?family=Syncopate");
.caption-blur-container {
width: 400px;
display: inline-block;
}
.caption-blur-container p {
text-align: center;
vertical-align: middle;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: 'Syncopate', Helvetica, Arial;
text-transform: uppercase;
position: absolute;
margin-top: 75px;
margin-left: 40px;
color: white;
width: 320px;
z-index: 999;
}
.caption-blur-container i {
display: inline-block;
font-style: normal;
padding: 0 0.25em;
-webkit-transform: scale(0) translate3d(0, -2000px, 0);
-moz-transform: scale(0) translate3d(0, -2000px, 0);
-ms-transform: scale(0) translate3d(0, -2000px, 0);
-o-transform: scale(0) translate3d(0, -2000px, 0);
transform: scale(0) translate3d(0, -2000px, 0);
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.caption-blur-container i.fly-in-out {
-webkit-animation: fly-in-out 3s ease-in-out forwards;
-moz-animation: fly-in-out 3s ease-in-out;
-o-animation: fly-in-out 3s ease-in-out;
animation: fly-in-out 3s ease-in-out forwards;
color: rgba(0, 0, 0, 0.8);
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
background: transparent;
box-shadow: none;
}
.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
 @-webkit-keyframes fly-in-out {
 0% {
 -webkit-transform: scale(0) translate3d(0, -1000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -webkit-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @-moz-keyframes fly-in-out {
 0% {
 -moz-transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -moz-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @-o-keyframes fly-in-out {
 0% {
 -o-transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 -o-transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
 @keyframes fly-in-out {
 0% {
 transform: scale(0) translate3d(0, -2000px, 0);
 background: rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.2);
 border-radius: 50%;
}
 15%, 85% {
 color: rgba(0, 0, 0, 0.8);
 transform: scale(1) translate3d(0, 0, 0);
 background: transparent;
 box-shadow: none;
}
}
