/*------------------------------------------------------------------
[Table of contents]

01. Fancybox.css
02. Masonry, Isotope, Filters
03. Animate.css

-------------------------------------------------------------------*/

/*=========================================================================

 01. Fancybox
 
=========================================================================*/


.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; }

.fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; }

.fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.fancybox-opened { z-index: 8030; }

.fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); }

.fancybox-outer, .fancybox-inner { position: relative; }

.fancybox-inner { overflow: hidden; }

.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; }

.fancybox-error { color: #444; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 15px; white-space: nowrap; }

.fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; }

.fancybox-image { max-width: 100%; max-height: 100%; }

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../img/fancybox/fancybox_sprite.png'); }

#fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; }

#fancybox-loading div { width: 44px; height: 44px; background: url('../img/fancybox/fancybox_loading.gif') center center no-repeat; }

.fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; }

.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../img/fancybox/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 8040; }

.fancybox-prev { left: 0; }

.fancybox-next { right: 0; }

.fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; }

.fancybox-prev span { left: 10px; background-position: 0 -36px; }

.fancybox-next span { right: 10px; background-position: 0 -72px; }

.fancybox-nav:hover span { visibility: visible; }

.fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; }

/* Overlay helper */

.fancybox-lock { overflow: hidden !important; width: auto; }

.fancybox-lock body { overflow: hidden !important; }

.fancybox-lock-test { overflow-y: hidden !important; }

.fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('../img/fancybox/fancybox_overlay.png'); }

.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; }

.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; }

/* Title helper */

.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; text-shadow: none; z-index: 8050; }

.fancybox-opened .fancybox-title { visibility: visible; }

.fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; }

.fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; }

.fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; }

.fancybox-title-inside-wrap { padding-top: 10px; }

.fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); }

/*Retina graphics!*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../img/fancybox/fancybox_sprite%402x.png'); background-size: 44px 152px;/*The size of the normal image, half the size of the hi-res image*/
}

#fancybox-loading div { background-image: url('../img/fancybox/fancybox_loading%402x.gif'); background-size: 24px 24px;/*The size of the normal image, half the size of the hi-res image*/
}
}

/*=========================================================================

 02. Masonry, Isotope, Filters
 
=========================================================================*/


.masonry-wrapper { background: none repeat scroll 0 0 #FFFFFF; border-top: 1px solid #EEEEEE; height: auto; margin: 0 auto; overflow: hidden; position: relative; }

.iso-image-size { width: 100% !important; height: 100% !important; }

.bg-theme-color-10 { background-color: #333333; }

/*** Transition ***/

.filter-floating ul { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.filters li a:before { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }

/*** Gallery List ***/

.container-isotope { position: relative; }

.isotope { opacity: 0; }

.isotope_fade { opacity: 1; }

.isotope-item { z-index: 2; }

.isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }

.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }

.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; }

/*filters*/

.filters { display: inline-block; margin-bottom: 40px; position: relative; text-align: center; width: 100%; z-index: 99; }

.filters li { display: inline-block; float: left; width: 100%; }

.filters li a { background: none repeat scroll 0 0 #FFFFFF; color: #333333; display: block; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 600; height: 60px; line-height: 60px; padding: 0 19px; position: relative; text-transform: uppercase; }

.filters li.active a:before, .filters a:hover:before { opacity: 1; visibility: visible; }

.filter-floating { background: none repeat scroll 0 0 #000000; color: #fff; position: absolute; z-index: 7; right: 10px; top: 0; width: auto; min-width: 50px; height: 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.filter-floating.filter-floating-fixed { position: fixed; }

.filter-floating ul { background: none repeat scroll 0 0 #FFFFFF; margin-top: 50px; opacity: 0; visibility: hidden; position: absolute; z-index: -999; right: 0; top: 30px; text-align: right; width: 200px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.filter-floating ul li { float: none; }

.filter-floating:hover ul { opacity: 1; visibility: visible; z-index: 999; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); }

.filter-floating-triggle { width: 50px; height: 50px; font-size: 24px; text-align: center; line-height: 50px; cursor: pointer; border-radius: 0px; position: absolute; z-index: 999; }

/*-------------------------------------------------------*/
/* 1. Isotope filtering
/*-------------------------------------------------------*/

.isotope-item { z-index: 2; }

.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

.isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }

.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }

.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }
@keyframes pulsate {
0% {
 transform: scale(1);
}
 50% {
 transform: scale(1.1);
}
 100% {
 transform: scale(1);
}
}
@-webkit-keyframes pulsate {
0% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 transform: scale(1);
}
 50% {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 transform: scale(1);
}
}
@-moz-keyframes pulsate {
0% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 transform: scale(1);
}
 50% {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 transform: scale(1);
}
}
@-o-keyframes pulsate {
0% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
 50% {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
}

/*-------------------------------------------------------*/
/* filtering
/*-------------------------------------------------------*/

ul.filter { display: inline-block; margin: 20px 0 0; padding: 0; text-align: center; }

ul.filter li { list-style: none; display: inline-block; float: left; width: auto; }

ul.filter li { background: none repeat scroll 0 0 #FFFFFF; border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.3); display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 12px; font-weight: 600; height: auto; color: #333; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; text-transform: uppercase; }

ul.filter li:hover { text-decoration: underline; color: #715788; }

ul.filter li:first-child { -webkit-border-radius: 3px 0px 0px 3px; -moz-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; }

ul.filter li:last-child { -webkit-border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; }

ul.filter li.active, ul.filter li:hover { background: #000000 none repeat scroll 0 0; color: #ffffff; text-decoration: none; }

ul.filter li a { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #333333; text-decoration: none; }

ul.filter li a:hover, ul.filter li:hover a, ul.filter li.active a { color: #fff; }

/*** Portfolio brick ***/

.width-and-small, .width-and-big, .width-and-long, .width-and-height { overflow: hidden; }

.brick-post-bgcolor-default { background: none repeat scroll 0 0 #000; height: 100%; }

.brick-inside { position: relative; width: 100%; height: 100%; }

.brick-content { position: relative; height: 100%; overflow: hidden; }

.brick-link { height: 100%; width: 100%; }

.brick-content img { position: relative; z-index: 1; height: 100% !important; width: 100% !important; }

.brick-hover-mask { width: 100%; height: 100%; }

.brick-content img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; }

.brick-with-img .brick-hover-mask { position: absolute; z-index: 2; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }

.brick-hover-mask .brick-title { font-size: 18px; margin-top: -5px; line-height: 20px; padding-right: 20px; padding-left: 20px; opacity: 0.8; text-align: center; position: relative; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }

.brick-with-img .brick-hover-mask .brick-title { -webkit-transform: scale(0) translate(0, -50%); -moz-transform: scale(0) translate(0, -50%); -o-transform: scale(0) translate(0, -50%); -ms-transform: scale(0) translate(0, -50%); transform: scale(0) translate(0, -50%); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform-origin: 50% 50% 50%; -moz-transform-origin: 50% 50% 50%; -o-transform-origin: 50% 50% 50%; -ms-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }

.brick-hover-mask .brick-title:before { content: ''; width: 25px; height: 2px; position: absolute; bottom: -10px; left: 50%; margin-left: -12.5px; }

.brick-with-img .brick-hover:hover ~ .brick-content img { -webkit-transform: rotate(-10deg) scale(1.4); -moz-transform: rotate(-10deg) scale(1.4); -ms-transform: rotate(-10deg) scale(1.4); -o-transform: rotate(-10deg) scale(1.4); transform: rotate(-10deg) scale(1.4); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=35)"; filter: alpha(opacity=35); opacity: .35; }

.brick-with-img .brick-hover:hover.brick-hover-mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }

.brick-with-img .brick-hover:hover.brick-hover-mask .brick-title { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 50%; -webkit-transform: scale(1) translate(0, -50%); -moz-transform: scale(1) translate(0, -50%); -o-transform: scale(1) translate(0, -50%); -ms-transform: scale(1) translate(0, -50%); transform: scale(1) translate(0, -50%); }

/*** disabling Isotope CSS3 transitions ***/

.isotope-list-thumb { width: 100% }

/*** Blog MarsonyList  ***/

.isotope-item.standard .item_topbar:before { content: "\e621"; }

.isotope-item.gallery .item_topbar:before { content: "\e623"; }

.isotope-item.audio .item_topbar:before { content: "\e626"; }

.isotope-item.video .item_topbar:before { content: "\e620"; }

.isotope-item.link .item_topbar:before { content: "\e624"; }

.isotope-item.quote .item_topbar:before { content: "\e622"; }

.item_topbar { display: none; }

.item_des { }

.item_title { font-size: 18px; padding: 10px 20px; margin-bottom: 0; }

.item-des-p { padding: 0 20px 20px; }

.item_link { display: block; width: 32px; height: 60px; line-height: 60px; float: right; margin-right: 20px; text-align: center; font-size: 24px; color: #fff; }

.item-link-wrap { padding: 0 20px 20px 20px; }

.item_topbar { height: 60px; line-height: 60px; padding-left: 20px; font-size: 24px; cursor: default; color: #fff; }

.post-bgcolor-default { background-color: #333; }

.item_title a { display: block; padding: 10px 0; line-height: 20px; }

/*Audio*/

.isotope-item.audio .like, .isotope-item.audio h2 { margin: 0; }

.audio-unit { height: 30px; position: relative; }

.audio-unit span.audiobutton { display: inline-block; width: 40px; cursor: pointer; }

.audio-unit span.audiobutton:before { font-size: 12px; content: "\e602"; position: absolute; left: 24px; top: 0; }

.audio-unit span.audiobutton.pause:before { content: "\e601"; }

.audio-unit span.songtitle { display: inline-block; position: absolute; top: -5px; left: 50px; margin-left: 10px; overflow: hidden; }

.soundcloudWrapper>iframe { margin-bottom: -10px; }

/*video*/

.videoWrapper { position: relative; height: 0; padding-bottom: 51.25%;/* 16:9 */ }

.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.isotope-item.quote .item_des p { padding: 20px; }

.isotope-item.quote .item_des i { font-size: 48px; height: 60px; margin-top: 20px; }

.videoWrapper.vimeo { padding-bottom: 48.9%; }

.liqd-gallery-img i { opacity: 0; visibility: hidden; position: absolute; width: 48px; height: 48px; line-height: 48px; font-size: 48px; text-align: center; color: #000; color: rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2); }

.liqd-gallery-img:hover i { opacity: 1; visibility: visible; }

/*** Blog MarsonyList ***/

.mas-pad-container { margin: 0 30px; }

.owl-inside { margin: 15px !important; }

.owl-inside .blog-item-wrap { margin-bottom: 40px; padding: 0 0 11px; }

.post-bgcolor-default { background-color: #333; }
/*Pictorial*/

@-moz-keyframes fill {
0% {
 opacity: 0;
}
 100% {
 opacity: 1;
 color: #0000FF;
}
}
@-webkit-keyframes fill {
0% {
 opacity: 0;
}
 100% {
 opacity: 1;
 color: #0000FF;
}
}

/*** Liquid list ***/

.ux-loading { width: 62px; height: 62px; position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; margin-top: -31px; margin-left: -31px; z-index: 999; background: #fff url(../img/isotope-loading.gif) no-repeat 50% 50%; border-radius: 31px; }

.csstransforms .ux-loading { display: none; }

/*css3 loading*/

.ux-loading-transform { width: 32px; height: 32px; position: absolute; text-align: center; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; }

.loading-dot1, .loading-dot2 { width: 65%; height: 65%; display: inline-block; position: absolute; top: 0; border-radius: 100%; background-color: rgba(255, 255, 255, 0.8); -webkit-animation: bounce 1.0s infinite ease-in-out; animation: bounce 1.0s infinite ease-in-out; }

.loading-dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
@-webkit-keyframes rotate {
100% {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes bounce {
0%, 100% {
 -webkit-transform: scale(0.0);
 -moz-transform: scale(0.0);
 transform: scale(0.0);
}
 50% {
 -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 transform: scale(1.0);
}
}
@keyframes bounce {
0%, 100% {
 -webkit-transform: scale(0.0);
 -moz-transform: scale(0.0);
 transform: scale(0.0);
}
 50% {
 -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 transform: scale(1.0);
}
}
/*** Load Animation ***/

@-webkit-keyframes zoomin {
0% {
 -webkit-transform: scaleX(0.1) scaleY(0.1);
 -moz-transform: scaleX(0.1) scaleY(0.1);
 transform: scaleX(0.1) scaleY(0.1);
 opacity: 0;
}
 100% {
 -webkit-transform: scaleX(1) scaleY(1);
 -moz-transform: scaleX(1) scaleY(1);
 transform: scaleX(1) scaleY(1);
 opacity: 1;
}
}
@-moz-keyframes zoomin {
0% {
 -webkit-transform: scaleX(0.1) scaleY(0.1);
 -moz-transform: scaleX(0.1) scaleY(0.1);
 transform: scaleX(0.1) scaleY(0.1);
 opacity: 0;
}
 100% {
 -webkit-transform: scaleX(1) scaleY(1);
 -moz-transform: scaleX(1) scaleY(1);
 transform: scaleX(1) scaleY(1);
 opacity: 1;
}
}
@-webkit-keyframes zoomout {
0% {
 -webkit-transform: scaleX(2.1) scaleY(2.1);
 -moz-transform: scaleX(2.1) scaleY(2.1);
 transform: scaleX(2.1) scaleY(2.1);
 opacity: 0;
}
 100% {
 -webkit-transform: scaleX(1) scaleY(1);
 -moz-transform: scaleX(1) scaleY(1);
 transform: scaleX(1) scaleY(1);
 opacity: 1;
}
}
@-moz-keyframes zoomout {
0% {
 -webkit-transform: scaleX(2.1) scaleY(2.1);
 -moz-transform: scaleX(2.1) scaleY(2.1);
 transform: scaleX(2.1) scaleY(2.1);
 opacity: 0;
}
 100% {
 -webkit-transform: scaleX(1) scaleY(1);
 -moz-transform: scaleX(1) scaleY(1);
 transform: scaleX(1) scaleY(1);
 opacity: 1;
}
}
@-webkit-keyframes flipInX {
0% {
 -webkit-transform: perspective(400px) rotateX(90deg);
 -moz-transform: perspective(400px) rotateX(90deg);
 transform: perspective(400px) rotateX(90deg);
 opacity: 0
}
 40% {
 -webkit-transform: perspective(400px) rotateX(-10deg);
 -moz-transform: perspective(400px) rotateX(-10deg);
 transform: perspective(400px) rotateX(-10deg);
}
 70% {
 -webkit-transform: perspective(400px) rotateX(10deg);
 -moz-transform: perspective(400px) rotateX(10deg);
 transform: perspective(400px) rotateX(10deg);
}
 100% {
 -webkit-transform: perspective(400px) rotateX(0deg);
 -moz-transform: perspective(400px) rotateX(0deg);
 transform: perspective(400px) rotateX(0deg);
 opacity: 1
}
}
@-moz-keyframes flipInX {
0% {
 -webkit-transform: perspective(400px) rotateX(90deg);
 -moz-transform: perspective(400px) rotateX(90deg);
 transform: perspective(400px) rotateX(90deg);
 opacity: 0
}
 40% {
 -webkit-transform: perspective(400px) rotateX(-10deg);
 -moz-transform: perspective(400px) rotateX(-10deg);
 transform: perspective(400px) rotateX(-10deg);
}
 70% {
 -webkit-transform: perspective(400px) rotateX(10deg);
 -moz-transform: perspective(400px) rotateX(10deg);
 transform: perspective(400px) rotateX(10deg);
}
 100% {
 -webkit-transform: perspective(400px) rotateX(0deg);
 -moz-transform: perspective(400px) rotateX(0deg);
 transform: perspective(400px) rotateX(0deg);
 opacity: 1
}
}
@-webkit-keyframes flipInY {
0% {
 -webkit-transform: perspective(400px) rotateY(90deg);
 -moz-transform: perspective(400px) rotateY(90deg);
 transform: perspective(400px) rotateY(90deg);
 opacity: 0
}
 40% {
 -webkit-transform: perspective(400px) rotateY(-10deg);
 -moz-transform: perspective(400px) rotateY(-10deg);
 transform: perspective(400px) rotateY(-10deg);
}
 70% {
 -webkit-transform: perspective(400px) rotateY(10deg);
 -moz-transform: perspective(400px) rotateY(10deg);
 transform: perspective(400px) rotateY(10deg);
}
 100% {
 -webkit-transform: perspective(400px) rotateY(0deg);
 -moz-transform: perspective(400px) rotateY(0deg);
 transform: perspective(400px) rotateY(0deg);
 opacity: 1
}
}
@-moz-keyframes flipInY {
0% {
 -webkit-transform: perspective(400px) rotateY(90deg);
 -moz-transform: perspective(400px) rotateY(90deg);
 transform: perspective(400px) rotateY(90deg);
 opacity: 0
}
 40% {
 -webkit-transform: perspective(400px) rotateY(-10deg);
 -moz-transform: perspective(400px) rotateY(-10deg);
 transform: perspective(400px) rotateY(-10deg);
}
 70% {
 -webkit-transform: perspective(400px) rotateY(10deg);
 -moz-transform: perspective(400px) rotateY(10deg);
 transform: perspective(400px) rotateY(10deg);
}
 100% {
 -webkit-transform: perspective(400px) rotateY(0deg);
 -moz-transform: perspective(400px) rotateY(0deg);
 transform: perspective(400px) rotateY(0deg);
 opacity: 1
}
}
@-webkit-keyframes bounceInDown {
0% {
 opacity: 0;
 -webkit-transform: translateY(-2000px);
 -moz-transform: translateY(-2000px);
 transform: translateY(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateY(30px);
 -moz-transform: translateY(30px);
 transform: translateY(30px);
}
 80% {
 -webkit-transform: translateY(-10px);
 -moz-transform: translateY(-10px);
 transform: translateY(-10px);
}
 100% {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
 opacity: 0;
 -webkit-transform: translateY(-2000px);
 -moz-transform: translateY(-2000px);
 transform: translateY(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateY(30px);
 -moz-transform: translateY(30px);
 transform: translateY(30px);
}
 80% {
 -webkit-transform: translateY(-10px);
 -moz-transform: translateY(-10px);
 transform: translateY(-10px);
}
 100% {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 transform: translateY(0);
}
}
@-webkit-keyframes bounceInUp {
0% {
 opacity: 0;
 -webkit-transform: translateY(2000px);
 -moz-transform: translateY(2000px);
 transform: translateY(2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateY(-30px);
 -moz-transform: translateY(-30px);
 transform: translateY(-30px);
}
 80% {
 -webkit-transform: translateY(10px);
 -moz-transform: translateY(10px);
 transform: translateY(10px);
}
 100% {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
 opacity: 0;
 -webkit-transform: translateY(2000px);
 -moz-transform: translateY(2000px);
 transform: translateY(2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateY(-30px);
 -moz-transform: translateY(-30px);
 transform: translateY(-30px);
}
 80% {
 -webkit-transform: translateY(10px);
 -moz-transform: translateY(10px);
 transform: translateY(10px);
}
 100% {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 transform: translateY(0);
}
}
@-webkit-keyframes bounceInLeft {
0% {
 opacity: 0;
 -webkit-transform: translateX(-2000px);
 -moz-transform: translateX(-2000px);
 transform: translateX(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(30px);
 -moz-transform: translateX(30px);
 transform: translateX(30px);
}
 80% {
 -webkit-transform: translateX(-10px);
 -moz-transform: translateX(-10px);
 transform: translateX(-10px);
}
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
 opacity: 0;
 -webkit-transform: translateX(-2000px);
 -moz-transform: translateX(-2000px);
 transform: translateX(-2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(30px);
 -moz-transform: translateX(30px);
 transform: translateX(30px);
}
 80% {
 -webkit-transform: translateX(-10px);
 -moz-transform: translateX(-10px);
 transform: translateX(-10px);
}
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 transform: translateX(0);
}
}
@-webkit-keyframes bounceInRight {
0% {
 opacity: 0;
 -webkit-transform: translateX(2000px);
 -moz-transform: translateX(2000px);
 transform: translateX(2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(-30px);
 -moz-transform: translateX(-30px);
 transform: translateX(-30px);
}
 80% {
 -webkit-transform: translateX(10px);
 -moz-transform: translateX(10px);
 transform: translateX(10px);
}
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
 opacity: 0;
 -webkit-transform: translateX(2000px);
 -moz-transform: translateX(2000px);
 transform: translateX(2000px);
}
 60% {
 opacity: 1;
 -webkit-transform: translateX(-30px);
 -moz-transform: translateX(-30px);
 transform: translateX(-30px);
}
 80% {
 -webkit-transform: translateX(10px);
 -moz-transform: translateX(10px);
 transform: translateX(10px);
}
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 transform: translateX(0);
}
}
@-webkit-keyframes rotateInDownLeft {
0% {
 -webkit-transform-origin: left bottom;
 -moz-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 transform: rotate(-90deg);
 opacity: 0
}
 100% {
 -webkit-transform-origin: left bottom;
 -moz-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 transform: rotate(0);
 opacity: 1
}
}
@-moz-keyframes rotateInDownLeft {
0% {
 -webkit-transform-origin: left bottom;
 -moz-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 transform: rotate(-90deg);
 opacity: 0
}
 100% {
 -webkit-transform-origin: left bottom;
 -moz-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 transform: rotate(0);
 opacity: 1
}
}
@-webkit-keyframes rotateInDownRight {
0% {
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 transform: rotate(90deg);
 opacity: 0
}
 100% {
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 transform: rotate(0);
 opacity: 1
}
}
@-moz-keyframes rotateInDownRight {
0% {
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 transform: rotate(90deg);
 opacity: 0
}
 100% {
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 transform: rotate(0);
 opacity: 1
}
}

/*** Porfolio Brick list ***/

.brick-hover-mask, .brick-hover-mask h3 { color: #fff; }

.brick-hover-mask h3:before { background-color: #fff; }

.filter-floating li, .filter-floating-triggle { border-bottom: 1px solid rgba(0, 0, 0, 0.07); }

.filters li a:before { background-color: #999; }

.filter-floating li:last-child, .filter-floating-triggle:last-child { border-bottom: 0 none; }

/*** Content Bg Color ***/

.filters.filter-floating li a:before { background-color: #fff; }

.filter-floating a, .filter-floating a:hover { background: none repeat scroll 0 0 #000000; color: #fff; }

/*** Button & Bar Font Color. note: on BG#333 ***/

.filters a:before { background-color: #fff; }

/*** liquid list ***/

.item_title { position: relative; padding-bottom: 30px; padding-top: 30px; }

.item_title:before { content: ''; position: absolute; bottom: 27px; left: 20px; width: 30px; height: 3px; }

.item_des { padding-bottom: 20px; }

.item-des-p, .isotope-item.quote .item_des p, .item-link-wrap { }

.isotope-item.audio .audio_player_list { padding-bottom: 30px; }

.audio_player_list { padding-bottom: 20px; }

.audio-unit span.audiobutton:before { top: 4px; }

.audio-unit { line-height: 30px; }

.liqd-gallery-img i { box-shadow: none; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); color: #fff; }

/*** Hightlight color ***/

a:hover, .item_title a:hover, .item_des a:hover { color: #FF5533; }

textarea:focus, input:focus { border-color: #FF5533; outline: 0; }

.item_des, .audio_player_list { background-color: #FFFFFF; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.07); box-shadow: 0 0 3px rgba(0, 0, 0, 0.07); }

/*=========================================================================

 03. Animate.css
 
=========================================================================*/




/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; }

.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }

.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; }
 @-webkit-keyframes bounce {
 from, 20%, 53%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 40%, 43% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -30px, 0);
 transform: translate3d(0, -30px, 0);
}
 70% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -15px, 0);
 transform: translate3d(0, -15px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -4px, 0);
 transform: translate3d(0, -4px, 0);
}
}
 @keyframes bounce {
 from, 20%, 53%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 40%, 43% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -30px, 0);
 transform: translate3d(0, -30px, 0);
}
 70% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -15px, 0);
 transform: translate3d(0, -15px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -4px, 0);
 transform: translate3d(0, -4px, 0);
}
}

.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
 @-webkit-keyframes flash {
 from, 50%, to {
 opacity: 1;
}
 25%, 75% {
 opacity: 0;
}
}
 @keyframes flash {
 from, 50%, to {
 opacity: 1;
}
 25%, 75% {
 opacity: 0;
}
}

.flash { -webkit-animation-name: flash; animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 50% {
 -webkit-transform: scale3d(1.05, 1.05, 1.05);
 transform: scale3d(1.05, 1.05, 1.05);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes pulse {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 50% {
 -webkit-transform: scale3d(1.05, 1.05, 1.05);
 transform: scale3d(1.05, 1.05, 1.05);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

.pulse { -webkit-animation-name: pulse; animation-name: pulse; }
 @-webkit-keyframes rubberBand {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 30% {
 -webkit-transform: scale3d(1.25, 0.75, 1);
 transform: scale3d(1.25, 0.75, 1);
}
 40% {
 -webkit-transform: scale3d(0.75, 1.25, 1);
 transform: scale3d(0.75, 1.25, 1);
}
 50% {
 -webkit-transform: scale3d(1.15, 0.85, 1);
 transform: scale3d(1.15, 0.85, 1);
}
 65% {
 -webkit-transform: scale3d(.95, 1.05, 1);
 transform: scale3d(.95, 1.05, 1);
}
 75% {
 -webkit-transform: scale3d(1.05, .95, 1);
 transform: scale3d(1.05, .95, 1);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes rubberBand {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 30% {
 -webkit-transform: scale3d(1.25, 0.75, 1);
 transform: scale3d(1.25, 0.75, 1);
}
 40% {
 -webkit-transform: scale3d(0.75, 1.25, 1);
 transform: scale3d(0.75, 1.25, 1);
}
 50% {
 -webkit-transform: scale3d(1.15, 0.85, 1);
 transform: scale3d(1.15, 0.85, 1);
}
 65% {
 -webkit-transform: scale3d(.95, 1.05, 1);
 transform: scale3d(.95, 1.05, 1);
}
 75% {
 -webkit-transform: scale3d(1.05, .95, 1);
 transform: scale3d(1.05, .95, 1);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }
 @-webkit-keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
}
 @keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
}

.shake { -webkit-animation-name: shake; animation-name: shake; }
 @-webkit-keyframes headShake {
 0% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
 6.5% {
 -webkit-transform: translateX(-6px) rotateY(-9deg);
 transform: translateX(-6px) rotateY(-9deg);
}
 18.5% {
 -webkit-transform: translateX(5px) rotateY(7deg);
 transform: translateX(5px) rotateY(7deg);
}
 31.5% {
 -webkit-transform: translateX(-3px) rotateY(-5deg);
 transform: translateX(-3px) rotateY(-5deg);
}
 43.5% {
 -webkit-transform: translateX(2px) rotateY(3deg);
 transform: translateX(2px) rotateY(3deg);
}
 50% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @keyframes headShake {
 0% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
 6.5% {
 -webkit-transform: translateX(-6px) rotateY(-9deg);
 transform: translateX(-6px) rotateY(-9deg);
}
 18.5% {
 -webkit-transform: translateX(5px) rotateY(7deg);
 transform: translateX(5px) rotateY(7deg);
}
 31.5% {
 -webkit-transform: translateX(-3px) rotateY(-5deg);
 transform: translateX(-3px) rotateY(-5deg);
}
 43.5% {
 -webkit-transform: translateX(2px) rotateY(3deg);
 transform: translateX(2px) rotateY(3deg);
}
 50% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}

.headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; }
 @-webkit-keyframes swing {
 20% {
 -webkit-transform: rotate3d(0, 0, 1, 15deg);
 transform: rotate3d(0, 0, 1, 15deg);
}
 40% {
 -webkit-transform: rotate3d(0, 0, 1, -10deg);
 transform: rotate3d(0, 0, 1, -10deg);
}
 60% {
 -webkit-transform: rotate3d(0, 0, 1, 5deg);
 transform: rotate3d(0, 0, 1, 5deg);
}
 80% {
 -webkit-transform: rotate3d(0, 0, 1, -5deg);
 transform: rotate3d(0, 0, 1, -5deg);
}
 to {
 -webkit-transform: rotate3d(0, 0, 1, 0deg);
 transform: rotate3d(0, 0, 1, 0deg);
}
}
 @keyframes swing {
 20% {
 -webkit-transform: rotate3d(0, 0, 1, 15deg);
 transform: rotate3d(0, 0, 1, 15deg);
}
 40% {
 -webkit-transform: rotate3d(0, 0, 1, -10deg);
 transform: rotate3d(0, 0, 1, -10deg);
}
 60% {
 -webkit-transform: rotate3d(0, 0, 1, 5deg);
 transform: rotate3d(0, 0, 1, 5deg);
}
 80% {
 -webkit-transform: rotate3d(0, 0, 1, -5deg);
 transform: rotate3d(0, 0, 1, -5deg);
}
 to {
 -webkit-transform: rotate3d(0, 0, 1, 0deg);
 transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }
 @-webkit-keyframes tada {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 10%, 20% {
 -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes tada {
 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 10%, 20% {
 -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

.tada { -webkit-animation-name: tada; animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
 from {
 -webkit-transform: none;
 transform: none;
}
 15% {
 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
 30% {
 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
 45% {
 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
 60% {
 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
 75% {
 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes wobble {
 from {
 -webkit-transform: none;
 transform: none;
}
 15% {
 -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
 30% {
 -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
 45% {
 -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
 60% {
 -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
 75% {
 -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}

.wobble { -webkit-animation-name: wobble; animation-name: wobble; }
 @-webkit-keyframes jello {
 from, 11.1%, to {
 -webkit-transform: none;
 transform: none;
}
 22.2% {
 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 transform: skewX(-12.5deg) skewY(-12.5deg);
}
 33.3% {
 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 transform: skewX(6.25deg) skewY(6.25deg);
}
 44.4% {
 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 transform: skewX(-3.125deg) skewY(-3.125deg);
}
 55.5% {
 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 transform: skewX(1.5625deg) skewY(1.5625deg);
}
 66.6% {
 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
 77.7% {
 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 transform: skewX(0.390625deg) skewY(0.390625deg);
}
 88.8% {
 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
 @keyframes jello {
 from, 11.1%, to {
 -webkit-transform: none;
 transform: none;
}
 22.2% {
 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 transform: skewX(-12.5deg) skewY(-12.5deg);
}
 33.3% {
 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 transform: skewX(6.25deg) skewY(6.25deg);
}
 44.4% {
 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 transform: skewX(-3.125deg) skewY(-3.125deg);
}
 55.5% {
 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 transform: skewX(1.5625deg) skewY(1.5625deg);
}
 66.6% {
 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
 77.7% {
 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 transform: skewX(0.390625deg) skewY(0.390625deg);
}
 88.8% {
 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

.jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; }
 @-webkit-keyframes bounceIn {
 from, 20%, 40%, 60%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(.97, .97, .97);
 transform: scale3d(.97, .97, .97);
}
 to {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes bounceIn {
 from, 20%, 40%, 60%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(.97, .97, .97);
 transform: scale3d(.97, .97, .97);
}
 to {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; }
 @-webkit-keyframes bounceInDown {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -3000px, 0);
 transform: translate3d(0, -3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, 25px, 0);
 transform: translate3d(0, 25px, 0);
}
 75% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, 5px, 0);
 transform: translate3d(0, 5px, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes bounceInDown {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -3000px, 0);
 transform: translate3d(0, -3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, 25px, 0);
 transform: translate3d(0, 25px, 0);
}
 75% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, 5px, 0);
 transform: translate3d(0, 5px, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}

.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }
 @-webkit-keyframes bounceInLeft {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(-3000px, 0, 0);
 transform: translate3d(-3000px, 0, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(25px, 0, 0);
 transform: translate3d(25px, 0, 0);
}
 75% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 90% {
 -webkit-transform: translate3d(5px, 0, 0);
 transform: translate3d(5px, 0, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes bounceInLeft {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: translate3d(-3000px, 0, 0);
 transform: translate3d(-3000px, 0, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(25px, 0, 0);
 transform: translate3d(25px, 0, 0);
}
 75% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 90% {
 -webkit-transform: translate3d(5px, 0, 0);
 transform: translate3d(5px, 0, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}

.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; }
 @-webkit-keyframes bounceInRight {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 from {
 opacity: 0;
 -webkit-transform: translate3d(3000px, 0, 0);
 transform: translate3d(3000px, 0, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(-25px, 0, 0);
 transform: translate3d(-25px, 0, 0);
}
 75% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
 90% {
 -webkit-transform: translate3d(-5px, 0, 0);
 transform: translate3d(-5px, 0, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes bounceInRight {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 from {
 opacity: 0;
 -webkit-transform: translate3d(3000px, 0, 0);
 transform: translate3d(3000px, 0, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(-25px, 0, 0);
 transform: translate3d(-25px, 0, 0);
}
 75% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
 90% {
 -webkit-transform: translate3d(-5px, 0, 0);
 transform: translate3d(-5px, 0, 0);
}
 to {
 -webkit-transform: none;
 transform: none;
}
}

.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }
 @-webkit-keyframes bounceInUp {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 3000px, 0);
 transform: translate3d(0, 3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 75% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -5px, 0);
 transform: translate3d(0, -5px, 0);
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes bounceInUp {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 3000px, 0);
 transform: translate3d(0, 3000px, 0);
}
 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 75% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -5px, 0);
 transform: translate3d(0, -5px, 0);
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}

.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; }
 @-webkit-keyframes bounceOut {
 20% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 50%, 55% {
 opacity: 1;
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
}
 @keyframes bounceOut {
 20% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 50%, 55% {
 opacity: 1;
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
}

.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; }
 @-webkit-keyframes bounceOutDown {
 20% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 40%, 45% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
}
 @keyframes bounceOutDown {
 20% {
 -webkit-transform: translate3d(0, 10px, 0);
 transform: translate3d(0, 10px, 0);
}
 40%, 45% {
 opacity: 1;
 -webkit-transform: translate3d(0, -20px, 0);
 transform: translate3d(0, -20px, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
}

.bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; }
 @-webkit-keyframes bounceOutLeft {
 20% {
 opacity: 1;
 -webkit-transform: translate3d(20px, 0, 0);
 transform: translate3d(20px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
}
 @keyframes bounceOutLeft {
 20% {
 opacity: 1;
 -webkit-transform: translate3d(20px, 0, 0);
 transform: translate3d(20px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
}

.bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; }
 @-webkit-keyframes bounceOutRight {
 20% {
 opacity: 1;
 -webkit-transform: translate3d(-20px, 0, 0);
 transform: translate3d(-20px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
}
 @keyframes bounceOutRight {
 20% {
 opacity: 1;
 -webkit-transform: translate3d(-20px, 0, 0);
 transform: translate3d(-20px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
}

.bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; }
 @-webkit-keyframes bounceOutUp {
 20% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
}
 40%, 45% {
 opacity: 1;
 -webkit-transform: translate3d(0, 20px, 0);
 transform: translate3d(0, 20px, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
}
 @keyframes bounceOutUp {
 20% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
}
 40%, 45% {
 opacity: 1;
 -webkit-transform: translate3d(0, 20px, 0);
 transform: translate3d(0, 20px, 0);
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
}

.bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; }
 @-webkit-keyframes fadeIn {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
 @keyframes fadeIn {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
 @-webkit-keyframes fadeInDown {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInDown {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
 @-webkit-keyframes fadeInDownBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInDownBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; }
 @-webkit-keyframes fadeInLeft {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInLeft {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
 @-webkit-keyframes fadeInLeftBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInLeftBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; }
 @-webkit-keyframes fadeInRight {
 from {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInRight {
 from {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
 @-webkit-keyframes fadeInRightBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInRightBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; }
 @-webkit-keyframes fadeInUp {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInUp {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
 @-webkit-keyframes fadeInUpBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes fadeInUpBig {
 from {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; }
 @-webkit-keyframes fadeOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}
 @keyframes fadeOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}

.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }
 @-webkit-keyframes fadeOutDown {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
}
 @keyframes fadeOutDown {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
}

.fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; }
 @-webkit-keyframes fadeOutDownBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
}
 @keyframes fadeOutDownBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
}

.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; }
 @-webkit-keyframes fadeOutLeft {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}
 @keyframes fadeOutLeft {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}

.fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; }
 @-webkit-keyframes fadeOutLeftBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
}
 @keyframes fadeOutLeftBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
}
}

.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; }
 @-webkit-keyframes fadeOutRight {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
}
 @keyframes fadeOutRight {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
}

.fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; }
 @-webkit-keyframes fadeOutRightBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
}
 @keyframes fadeOutRightBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
}
}

.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; }
 @-webkit-keyframes fadeOutUp {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
}
 @keyframes fadeOutUp {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
}

.fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; }
 @-webkit-keyframes fadeOutUpBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
}
 @keyframes fadeOutUpBig {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
}
}

.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; }
 @-webkit-keyframes flip {
 from {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 40% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 50% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 80% {
 -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
 transform: perspective(400px) scale3d(.95, .95, .95);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
}
 @keyframes flip {
 from {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 40% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 50% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 80% {
 -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
 transform: perspective(400px) scale3d(.95, .95, .95);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
}

.animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; }
 @-webkit-keyframes flipInX {
 from {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
}
 @keyframes flipInX {
 from {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
}

.flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; }
 @-webkit-keyframes flipInY {
 from {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
}
 @keyframes flipInY {
 from {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
 to {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
}

.flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; }
 @-webkit-keyframes flipOutX {
 from {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
 30% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 opacity: 1;
}
 to {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 opacity: 0;
}
}
 @keyframes flipOutX {
 from {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
 30% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 opacity: 1;
}
 to {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 opacity: 0;
}
}

.flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }
 @-webkit-keyframes flipOutY {
 from {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
 30% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 opacity: 1;
}
 to {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 opacity: 0;
}
}
 @keyframes flipOutY {
 from {
 -webkit-transform: perspective(400px);
 transform: perspective(400px);
}
 30% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 opacity: 1;
}
 to {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 opacity: 0;
}
}

.flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; }
 @-webkit-keyframes lightSpeedIn {
 from {
 -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
 transform: translate3d(100%, 0, 0) skewX(-30deg);
 opacity: 0;
}
 60% {
 -webkit-transform: skewX(20deg);
 transform: skewX(20deg);
 opacity: 1;
}
 80% {
 -webkit-transform: skewX(-5deg);
 transform: skewX(-5deg);
 opacity: 1;
}
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes lightSpeedIn {
 from {
 -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
 transform: translate3d(100%, 0, 0) skewX(-30deg);
 opacity: 0;
}
 60% {
 -webkit-transform: skewX(20deg);
 transform: skewX(20deg);
 opacity: 1;
}
 80% {
 -webkit-transform: skewX(-5deg);
 transform: skewX(-5deg);
 opacity: 1;
}
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
 @-webkit-keyframes lightSpeedOut {
 from {
 opacity: 1;
}
 to {
 -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
 transform: translate3d(100%, 0, 0) skewX(30deg);
 opacity: 0;
}
}
 @keyframes lightSpeedOut {
 from {
 opacity: 1;
}
 to {
 -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
 transform: translate3d(100%, 0, 0) skewX(30deg);
 opacity: 0;
}
}

.lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
 @-webkit-keyframes rotateIn {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, -200deg);
 transform: rotate3d(0, 0, 1, -200deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateIn {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, -200deg);
 transform: rotate3d(0, 0, 1, -200deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; }
 @-webkit-keyframes rotateInDownLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateInDownLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; }
 @-webkit-keyframes rotateInDownRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateInDownRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; }
 @-webkit-keyframes rotateInUpLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateInUpLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; }
 @-webkit-keyframes rotateInUpRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, -90deg);
 transform: rotate3d(0, 0, 1, -90deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateInUpRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, -90deg);
 transform: rotate3d(0, 0, 1, -90deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}

.rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; }
 @-webkit-keyframes rotateOut {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 opacity: 1;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, 200deg);
 transform: rotate3d(0, 0, 1, 200deg);
 opacity: 0;
}
}
 @keyframes rotateOut {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 opacity: 1;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, 200deg);
 transform: rotate3d(0, 0, 1, 200deg);
 opacity: 0;
}
}

.rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; }
 @-webkit-keyframes rotateOutDownLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
}
 @keyframes rotateOutDownLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, 45deg);
 transform: rotate3d(0, 0, 1, 45deg);
 opacity: 0;
}
}

.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; }
 @-webkit-keyframes rotateOutDownRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
}
 @keyframes rotateOutDownRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
}

.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; }
 @-webkit-keyframes rotateOutUpLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
}
 @keyframes rotateOutUpLeft {
 from {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: left bottom;
 transform-origin: left bottom;
 -webkit-transform: rotate3d(0, 0, 1, -45deg);
 transform: rotate3d(0, 0, 1, -45deg);
 opacity: 0;
}
}

.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; }
 @-webkit-keyframes rotateOutUpRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, 90deg);
 transform: rotate3d(0, 0, 1, 90deg);
 opacity: 0;
}
}
 @keyframes rotateOutUpRight {
 from {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 opacity: 1;
}
 to {
 -webkit-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: rotate3d(0, 0, 1, 90deg);
 transform: rotate3d(0, 0, 1, 90deg);
 opacity: 0;
}
}

.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; }
 @-webkit-keyframes hinge {
 0% {
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
}
 20%, 60% {
 -webkit-transform: rotate3d(0, 0, 1, 80deg);
 transform: rotate3d(0, 0, 1, 80deg);
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
}
 40%, 80% {
 -webkit-transform: rotate3d(0, 0, 1, 60deg);
 transform: rotate3d(0, 0, 1, 60deg);
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
 opacity: 1;
}
 to {
 -webkit-transform: translate3d(0, 700px, 0);
 transform: translate3d(0, 700px, 0);
 opacity: 0;
}
}
 @keyframes hinge {
 0% {
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
}
 20%, 60% {
 -webkit-transform: rotate3d(0, 0, 1, 80deg);
 transform: rotate3d(0, 0, 1, 80deg);
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
}
 40%, 80% {
 -webkit-transform: rotate3d(0, 0, 1, 60deg);
 transform: rotate3d(0, 0, 1, 60deg);
 -webkit-transform-origin: top left;
 transform-origin: top left;
 -webkit-animation-timing-function: ease-in-out;
 animation-timing-function: ease-in-out;
 opacity: 1;
}
 to {
 -webkit-transform: translate3d(0, 700px, 0);
 transform: translate3d(0, 700px, 0);
 opacity: 0;
}
}

.hinge { -webkit-animation-name: hinge; animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}
 @keyframes rollIn {
 from {
 opacity: 0;
 -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
 to {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
}
}

.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
 @keyframes rollOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
 -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}

.rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; }
 @-webkit-keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 50% {
 opacity: 1;
}
}
 @keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 50% {
 opacity: 1;
}
}

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }
 @-webkit-keyframes zoomInDown {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomInDown {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; }
 @-webkit-keyframes zoomInLeft {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomInLeft {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; }
 @-webkit-keyframes zoomInRight {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomInRight {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; }
 @-webkit-keyframes zoomInUp {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomInUp {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; }
 @-webkit-keyframes zoomOut {
 from {
 opacity: 1;
}
 50% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 to {
 opacity: 0;
}
}
 @keyframes zoomOut {
 from {
 opacity: 1;
}
 50% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 to {
 opacity: 0;
}
}

.zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; }
 @-webkit-keyframes zoomOutDown {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomOutDown {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; }
 @-webkit-keyframes zoomOutLeft {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
 transform: scale(.1) translate3d(-2000px, 0, 0);
 -webkit-transform-origin: left center;
 transform-origin: left center;
}
}
 @keyframes zoomOutLeft {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
 transform: scale(.1) translate3d(-2000px, 0, 0);
 -webkit-transform-origin: left center;
 transform-origin: left center;
}
}

.zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; }
 @-webkit-keyframes zoomOutRight {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
 transform: scale(.1) translate3d(2000px, 0, 0);
 -webkit-transform-origin: right center;
 transform-origin: right center;
}
}
 @keyframes zoomOutRight {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
 to {
 opacity: 0;
 -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
 transform: scale(.1) translate3d(2000px, 0, 0);
 -webkit-transform-origin: right center;
 transform-origin: right center;
}
}

.zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; }
 @-webkit-keyframes zoomOutUp {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomOutUp {
 40% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 to {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

.zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; }
 @-webkit-keyframes slideInDown {
 from {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes slideInDown {
 from {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}

.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; }
 @-webkit-keyframes slideInLeft {
 from {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes slideInLeft {
 from {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}

.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; }
 @-webkit-keyframes slideInRight {
 from {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes slideInRight {
 from {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}

.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; }
 @-webkit-keyframes slideInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes slideInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 visibility: visible;
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}

.slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; }
 @-webkit-keyframes slideOutDown {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
}
 @keyframes slideOutDown {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
}

.slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; }
 @-webkit-keyframes slideOutLeft {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}
 @keyframes slideOutLeft {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
}
}

.slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; }
 @-webkit-keyframes slideOutRight {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
}
 @keyframes slideOutRight {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
}
}

.slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; }
 @-webkit-keyframes slideOutUp {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
}
 @keyframes slideOutUp {
 from {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 to {
 visibility: hidden;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
}

.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; }