@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Zeyada');
*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.wrapper { margin:0 -5px; text-align:center;width:730px;}
.bubble { margin:0 auto; width:80px; text-align: center; background-color: rgba(229,229,229,1); padding:10px; display:inline-block; vertical-align:top; margin-right:-1px; position:relative;box-sizing:content-box;}
.bubble .details { visibility:hidden; opacity:0; transition:visibility 0s linear 0.5s,opacity 0.5s linear; width: 80px ; margin-bottom: 10px; margin-top: -40px; background: rgba(255,255,255,.2); font: 10px 'Roboto Condensed'; text-transform: uppercase; border-radius: 0 0 5px 5px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out; }
.bubble:hover .details {visibility:visible; opacity:1; transition-delay:0s; margin-top: -10px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;}
.filter-me {
filter: blur(1px) grayscale(100%);
-webkit-filter: blur(1px) grayscale(100%);
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
.filter-me:hover {
filter: blur(0px) grayscale(20%);
-webkit-filter: blur(0px) grayscale(20%);
-webkit-transition: all 500ms ease-in;
