├── README.md
├── assets
    ├── basics.zip
    ├── basics
    │   ├── css
    │   │   ├── animate.css
    │   │   ├── images
    │   │   │   ├── fjords.jpg
    │   │   │   ├── puppy.jpg
    │   │   │   └── ships.jpg
    │   │   ├── normalize.css
    │   │   └── styles.css
    │   ├── index.html
    │   └── js
    │   │   ├── jquery-1.11.1.min.js
    │   │   ├── midnight.jquery.min.js
    │   │   └── wow.min.js
    └── midnight.jpg
├── css
    ├── animate.css
    ├── images
    │   ├── fjords.jpg
    │   ├── puppy.jpg
    │   └── ships.jpg
    ├── normalize.css
    └── styles.css
├── index.html
└── js
    ├── jquery-1.11.1.min.js
    ├── midnight.jquery.min.js
    └── wow.min.js


/README.md:
--------------------------------------------------------------------------------
  1 | # Creating subtle UI details using Midnight.js, Wow.js and Animate.css
  2 | 
  3 | ![Midnight.js](http://aerolab.github.io/subtle-animations/assets/midnight.jpg)
  4 | 
  5 | Creating animations in CSS or Javascript is often annoying and/or time-consuming, so most people tend to pay a lot of attention to the content that’s below “the fold" (“the fold" is quickly becoming an outdated concept, but you know what I mean).
  6 | 
  7 | I’ll be covering a few techniques to help add some nice touches to your landing pages that only take a few minutes to implement and require pretty much no development work at all.
  8 | 
  9 | To create a base for this project, I put together a bunch of photographs from https://unsplash.com/ with some text on top so we have something to work with. 
 10 | 
 11 | **Download the files from [http://aerolab.github.io/subtle-animations/assets/basics.zip](http://aerolab.github.io/subtle-animations/assets/basics.zip) and put them in a new folder.**
 12 | 
 13 | *You can also check out the final result at [http://aerolab.github.io/subtle-animations](http://aerolab.github.io/subtle-animations/)*.
 14 | 
 15 | 
 16 | ## Dynamically change your fixed headers using Midnight.js
 17 | 
 18 | If you took a look at the demo site, you probably noticed that the minimalistic header we are using for "A How To Guide" becomes illegible in very light backgrounds. When this happens in most sites, we typically end up putting a background on the header, which usually improves legibility at the cost of making the design worse.
 19 | 
 20 | **Midnight.js [http://aerolab.github.io/midnight.js/](http://aerolab.github.io/midnight.js/)** is a jQuery plugin that changes your headers as you scroll, so the header always has a design that matches the content below it. This is particularly useful for minimalistic websites, as they often use transparent headers. 
 21 | 
 22 | Implementation is quite simple, as the setup is pretty much automatic. Start by adding a fixed header into the site. The example has one ready to go:
 23 | 
 24 | ```html
 25 | <nav class="fixed">
 26 |   <div class="container">
 27 |     <span class="logo">A How To Guide</span>
 28 |   </div>
 29 | </nav>
 30 | ```
 31 | 
 32 | Most of the setup comes in specifying which header corresponds to which section. This is done by adding **data-midnight="your-class"** to any section or piece of content that requires a different design for the header.
 33 | 
 34 | For the first section, we’ll be using a white header, so we’ll add **data-midnight="white"** to this section *(it doesn’t have to be only a section, any large element works well)*.
 35 | 
 36 | ```html
 37 | <section class="fjords" data-midnight="white">
 38 |   <article>
 39 |     <h1>Adding Subtle UI Details</h1>
 40 |     <p>Using Midnight.js, Wow.js and Animate.css</p>
 41 |   </article>
 42 | </section>
 43 | ```
 44 | 
 45 | In the next section, which is a photo of ships in very thick white fog, we’ll be using a darker header to help improve contrast. Let’s use **data-midnight="gray"** for the second one, and **data-midgnight="pink"** for the last one, so it feels more in line with the content:
 46 | 
 47 | ```html
 48 | <section class="ships" data-midnight="gray">
 49 |   <article>
 50 |     <h1>Be quiet</h1>
 51 |     <p>I'm hunting wabbits</p>
 52 |   </article>
 53 | </section>
 54 | 
 55 | <section class="puppy" data-midnight="pink">
 56 |   <article>
 57 |     <h1>OMG A PUPPY &lt;3</h1>
 58 |   </article>
 59 | </section>
 60 | ```
 61 | 
 62 | Now we just need to add some css rules to change the look of the header in those cases. We’ll just be changing the color of the text for the moment, so open up **css/styles.css** and add the following rules:
 63 | 
 64 | ```css
 65 | /* Styles for White, Gray and Pink headers */
 66 | .midnightHeader.white { color: #fff; }
 67 | .midnightHeader.gray { color: #999; }
 68 | .midnightHeader.pink { color: #ffc0cb; }
 69 | ```
 70 | 
 71 | Last but not least, we need to include the necessary libraries. We’ll add two libraries right before the end of the body: **jQuery** and **Midnight.js** (they are included in the project files inside the js folder):
 72 | 
 73 | ```html
 74 | <script src="js/jquery-1.11.1.min.js"></script>
 75 | <script src="js/midnight.jquery.min.js"></script>
 76 | ```
 77 | 
 78 | And right after that we start Midnight.js on document.ready, using **$('nav.fixed').midnight()** (you can change the selector to whatever you are using on your site):
 79 | 
 80 | ```html
 81 | <script>
 82 | $(document).ready(function(){
 83 |   $('nav.fixed').midnight();
 84 | });
 85 | </script>
 86 | ```
 87 | 
 88 | If you check the site now, you’ll notice that the fixed header gracefully changes color when you start scrolling into the ships section. It’s a very subtle effect, but it helps keep your designs clean.
 89 | 
 90 | ### Bonus Feature!
 91 | 
 92 | It’s possible to completely change the markup of your header just for a specific section. It’s mostly used to add some visual details that require extra markup, but it can be used to completely alter your headers as necessary. In this case, we’ll be changing the “logo" from "A How To Guide" to "Shhhhhhhhh" on the ships section, and a bunch of hearts for the part of the puppy, for additional bad comedy.
 93 | 
 94 | To do this, we need to alter our fixed header a bit. **First we need to identify the “default" header** (all headers that don't have custom markup will be based on this one), and then add the markup we need for any custom headers, like the gray one. 
 95 | 
 96 | This is done by creating multiple copies of the header and wrapping them in **.midnightHeader.default**, **.midnightHeader.gray** and **.midnightHeader.pink** respectively:
 97 | 
 98 | ```html
 99 | <nav class="fixed">
100 |   <div class="midnightHeader default">
101 |     <div class="container">
102 |       <span class="logo">A How To Guide</span>
103 |     </div>
104 |   </div>
105 |   <div class="midnightHeader gray">
106 |     <div class="container">
107 |       <span class="logo">Shhhhhhhhh</span>
108 |     </div>
109 |   </div>
110 |   <div class="midnightHeader pink">
111 |     <div class="container">
112 |       <span class="logo">❤❤❤ OMG PUPPIES ❤❤❤</span>
113 |     </div>
114 |   </div>
115 | </nav>
116 | ```
117 | 
118 | If you test the site now, you’ll notice that the header not just changes color, but it also changes the “name" of the site to match the section, which gives you more freedom in terms of navigation and design.
119 | 
120 | 
121 | ## Simple animations with Wow.js and Animate.css
122 | 
123 | **Wow.js [http://mynameismatthieu.com/WOW/](http://mynameismatthieu.com/WOW/)** looks more like a toy than a serious plugin, but it’s actually a very powerful library that’s extremely easy to implement.
124 | 
125 | Wow.js lets you animate things as they come into view. For instance, you can fade something in when you scroll to that section, letting users enjoy some extra UI candy. You can pick from a large set of animations from Animate.css [http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/) so you don’t even have to touch the CSS (but you can still do that if you want).
126 | 
127 | To get Wow.JS to work we have to include just two things:
128 | 
129 | **Animate.css**, which contains all the animations we need. Of course, you can create your own, or even tweak those to match your tastes. Just add a link to animate.css in the head of the document:
130 | ```html
131 | <link rel="stylesheet" href="css/animate.css" />
132 | ```
133 | 
134 | And **Wow.JS**. This is simply just including the script and initializing it, which is done by adding the following just before the end of the document:
135 | ```html
136 | <script src="js/wow.min.js"></script>
137 | <script>new WOW().init()</script>
138 | ```
139 | 
140 | That’s it! To animate an element as soon as it gets into view, **you just need to add the .wow class to that element**, and then any animation from Animate.css (like .fadeInUp, .slideInLeft, or one of the many options available at [http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)). 
141 | 
142 | For example, to make something fade in from the bottom of the screen, you just have to add wow fadeInUp. Let’s try this on the h1 our first section:
143 | 
144 | ```html
145 | <section class="fjords" data-midnight="white">
146 |   <article>
147 |     <h1 class="wow fadeInUp">Adding Subtle UI Details</h1>
148 |     <p>Using Midnight.js, Wow.js and Animate.css</p>
149 |   </article>
150 | </section>
151 | ```
152 | 
153 | If you feel like altering the animation slightly, you have quite a bit of control over how it behaves. For instance, let’s fade in the subtitle, but do it a few milliseconds after the title, so it follows a sequence. We can use **data-wow-delay="0.5s"** to make the subtitle wait for half a second before making its appearance:
154 | 
155 | ```html
156 | <section class="fjords" data-midnight="white">
157 |   <article>
158 |     <h1 class="wow fadeInUp">Adding Subtle UI Details</h1>
159 |     <p class="wow fadeInUp" data-wow-delay="0.5s">Using Midnight.js, Wow.js and Animate.css</p>
160 |   </article>
161 | </section>
162 | ```
163 | 
164 | We can even tweak how long the animation takes by using **data-wow-duration="1.5s"**, so it lasts a second and a half. This is particularly useful in the second section, combined with another delay:
165 | 
166 | ```html
167 | <section class="ships" data-midnight="gray">
168 |   <article>
169 |     <h1 class="wow fadeIn" data-wow-duration="1.5s">Be quiet</h1>
170 |     <p class="wow fadeIn" data-wow-delay="0.5s" data-wow-duration="1.5s">I'm hunting wabbits</p>
171 |   </article>
172 | </section>
173 | ```
174 | 
175 | 
176 | We can even repeat an animation a few times. Let’s make the last title shake a few times as soon as it gets into view with **data-wow-iteration="5"**. We'll take this opportunity to use all the properties, like **data-wow-duration="0.5s"** to make each shake last half a second, and we'll also add a large delay for the last piece so it appears after the main animation has finished.
177 | 
178 | ```html
179 | <section class="puppy">
180 |   <article>
181 |     <h1 class="wow shake" data-wow-iteration="5" data-wow-duration="0.5s">OMG A PUPPY &lt;3</h1>
182 |     <p class="wow fadeIn" data-wow-delay="2.5s">Ok, this one wasn't subtle at all</p>
183 |   </article>
184 | </section>
185 | ```
186 | 
187 | 
188 | That’s pretty much all there is to know about using Midnight.js, Wow.js and Animate.css! All you need to do now is find a project and experiment a bit with different animations. It’s a great tool to add some last-minute eye candy and -as long as you don’t overdo it- looks fantastic in most sites. I hope you enjoyed the article!
189 | 


--------------------------------------------------------------------------------
/assets/basics.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/assets/basics.zip


--------------------------------------------------------------------------------
/assets/basics/css/images/fjords.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/assets/basics/css/images/fjords.jpg


--------------------------------------------------------------------------------
/assets/basics/css/images/puppy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/assets/basics/css/images/puppy.jpg


--------------------------------------------------------------------------------
/assets/basics/css/images/ships.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/assets/basics/css/images/ships.jpg


--------------------------------------------------------------------------------
/assets/basics/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }


--------------------------------------------------------------------------------
/assets/basics/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fff;
 3 |   font-family: Lato, Arial, sans-serif;
 4 | }
 5 | 
 6 | /* Our Fixed Header */
 7 | nav.fixed {
 8 |   position: fixed;
 9 |   top: 0;
10 |   left: 0;
11 |   right: 0;
12 |   color: #fff;
13 |   font-weight: bold;
14 |   text-align: center;
15 | }
16 | 
17 | nav.fixed .container {
18 |   position: relative;
19 | }
20 | 
21 | .container {
22 |   max-width: 1100px;
23 |   margin: 0 auto;
24 |   padding: 20px;
25 | }
26 | 
27 | 
28 | 
29 | /* There are our main "sections", which are huge images with some text */
30 | section {
31 |   min-height: 100vh;
32 |   background-position: 50% 50%;
33 |   background-size: cover;
34 |   display: flex;
35 |   align-items: center;
36 |   text-align: center;
37 | }
38 | article {
39 |   display: block;
40 |   margin: 0px auto;
41 | }
42 | h1 {
43 |   font-size: 50px;
44 | }
45 | p {
46 |   font-size: 26px;
47 | }
48 | a {
49 |   color: inherit;
50 |   text-decoration: none;
51 |   border-bottom: 1px solid rgba(255,255,255,0.5);
52 | }
53 | a:hover {
54 |   border-bottom-color: rgba(255,255,255,1.0);
55 | }
56 | 
57 | 
58 | section.fjords {
59 |   background-image: url(images/fjords.jpg);
60 |   color: #fff;
61 | }
62 | section.ships {
63 |   background-image: url(images/ships.jpg);
64 |   background-position: 50% 100%;
65 |   color: #999;
66 | }
67 | section.puppy {
68 |   background-image: url(images/puppy.jpg);
69 |   color: #ffc0cb;
70 | }
71 | 


--------------------------------------------------------------------------------
/assets/basics/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 | 
 6 |   <title>Subtle Animations</title>
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
 9 | 
10 |   <link href="http://fonts.googleapis.com/css?family=Lato:400,400bold" rel="stylesheet" type="text/css" />
11 |   <link rel="stylesheet" href="css/normalize.css" />
12 |   <link rel="stylesheet" href="css/styles.css" />
13 |   
14 | </head>
15 | <body>
16 | 
17 | 
18 |   <!-- This is our fixed header, which will be enhanced with Midnight.js -->
19 |   <nav class="fixed">
20 |     <div class="container">
21 |       <span class="logo">A How To Guide</span>
22 |     </div>
23 |   </nav>
24 | 
25 | 
26 |   <!-- These are our landing page's sections -->
27 |   <section class="fjords">
28 |     <article>
29 |       <h1>Adding Subtle UI Details</h1>
30 |       <p>Using Midnight.js, Wow.js and Animate.css</p>
31 |       <p><a href="http://aerolab.github.io/subtle-animations" target="_blank">Learn how to do this on Github &gt;</a></p>
32 |     </article>
33 |   </section>
34 | 
35 | 
36 |   <section class="ships">
37 |     <article>
38 |       <h1>Be quiet</h1>
39 |       <p>I'm hunting wabbits</p>
40 |     </article>
41 |   </section>
42 | 
43 | 
44 |   <section class="puppy">
45 |     <article>
46 |       <h1>OMG A PUPPY &lt;3</h1>
47 |     </article>
48 |   </section>
49 | 
50 | 
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/assets/basics/js/midnight.jquery.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Midnight.js 1.0.3
 3 |  * jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
 4 |  * http://aerolab.github.io/midnight.js/
 5 |  *
 6 |  * Copyright (c) 2014 Aerolab <info@aerolab.co>
 7 |  *
 8 |  * Released under the MIT license
 9 |  * http://aerolab.github.io/midnight.js/LICENSE.txt
10 |  */
11 |  !function(e){e.fn.midnight=function(t){return"object"!=typeof t&&(t={}),this.each(function(){var s={headerClass:"midnightHeader",innerClass:"midnightInner",defaultClass:"default"};e.extend(s,t);var a=window.pageYOffset||document.documentElement.scrollTop,n=e(document).height(),r=e(this),o={},l={top:0,height:r.outerHeight()},d=e("[data-midnight]"),f=[],h=function(){for(var e="transform WebkitTransform MozTransform OTransform msTransform".split(" "),t=0;t<e.length;t++)if(void 0!==document.createElement("div").style[e[t]])return e[t];return!1},m=h();if(0!=d.length){var c=function(){var t=r.find("> ."+s.headerClass),a=0,n=0;return t.length?t.each(function(){var t=e(this),i=t.find("> ."+s.innerClass);i.length?(i.css("bottom","auto"),n=i.outerHeight(),i.css("bottom","0")):(t.css("bottom","auto"),n=t.outerHeight(),t.css("bottom","0")),a=n>a?n:a}):a=n=r.outerHeight(),a},u=function(){l.height=c(),r.css("height",l.height+"px")},g=function(){o["default"]={},d.each(function(){var t=e(this),s=t.data("midnight");"string"==typeof s&&(s=s.trim(),""!==s&&(o[s]={}))});({top:r.css("padding-top"),right:r.css("padding-right"),bottom:r.css("padding-bottom"),left:r.css("padding-left")});r.css({position:"fixed",top:0,left:0,right:0,overflow:"hidden"}),u();var t=r.find("> ."+s.headerClass);t.length?t.filter("."+s.defaultClass).length||t.filter("."+s.headerClass+":first").clone(!0,!0).attr("class",s.headerClass+" "+s.defaultClass):r.wrapInner('<div class="'+s.headerClass+" "+s.defaultClass+'"></div>');var t=r.find("> ."+s.headerClass),a=t.filter("."+s.defaultClass).clone(!0,!0);for(headerClass in o)if("undefined"==typeof o[headerClass].element){var n=t.filter("."+headerClass);o[headerClass].element=n.length?n:a.clone(!0,!0).removeClass(s.defaultClass).addClass(headerClass).appendTo(r);var i={position:"absolute",overflow:"hidden",top:0,left:0,right:0,bottom:0};o[headerClass].element.css(i),m!==!1&&o[headerClass].element.css(m,"translateZ(0)"),o[headerClass].element.find("> ."+s.innerClass).length||o[headerClass].element.wrapInner('<div class="'+s.innerClass+'"></div>'),o[headerClass].inner=o[headerClass].element.find("> ."+s.innerClass),o[headerClass].inner.css(i),m!==!1&&o[headerClass].inner.css(m,"translateZ(0)"),o[headerClass].from="",o[headerClass].progress=0}t.each(function(){var t=e(this),a=!1;for(headerClass in o)t.hasClass(headerClass)&&(a=!0);t.find("> ."+s.innerClass).length||t.wrapInner('<div class="'+s.innerClass+'"></div>'),a||t.hide()})};g();var p=function(){for(n=e(document).height(),f=[],i=0;i<d.length;i++){var t=e(d[i]);f.push({element:t,"class":t.data("midnight"),start:t.offset().top,end:t.offset().top+t.outerHeight()})}};setInterval(p,1e3);var x=function(){a=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,a=Math.max(a,0),a=Math.min(a,n);var e=l.height,t=a+l.top,s=a+l.top+e;for(ix in o)o[ix].from="",o[ix].progress=0;for(ix in f)s>=f[ix].start&&t<=f[ix].end&&(o[f[ix].class].visible=!0,t>=f[ix].start&&s<=f[ix].end?(o[f[ix].class].from="top",o[f[ix].class].progress+=1):s>f[ix].end&&t<f[ix].end?(o[f[ix].class].from="top",o[f[ix].class].progress=1-(s-f[ix].end)/e):s>f[ix].start&&t<f[ix].start&&("top"===o[f[ix].class].from?o[f[ix].class].progress+=(s-f[ix].start)/e:(o[f[ix].class].from="bottom",o[f[ix].class].progress=(s-f[ix].start)/e)))},C=function(){var e=0,t="";for(ix in o)""!==!o[ix].from&&(e+=o[ix].progress,t=ix);1>e&&(""===o[s.defaultClass].from?(o[s.defaultClass].from="top"===o[t].from?"bottom":"top",o[s.defaultClass].progress=1-e):o[s.defaultClass].progress+=1-e);for(ix in o)if(""!==!o[ix].from){var a=100*(1-o[ix].progress);"top"===o[ix].from?m!==!1?(o[ix].element[0].style[m]="translateY(-"+a+"%) translateZ(0)",o[ix].inner[0].style[m]="translateY(+"+a+"%) translateZ(0)"):(o[ix].element[0].style.top="-"+a+"%",o[ix].inner[0].style.top="+"+a+"%"):m!==!1?(o[ix].element[0].style[m]="translateY(+"+a+"%) translateZ(0)",o[ix].inner[0].style[m]="translateY(-"+a+"%) translateZ(0)"):(o[ix].element.style.top="+"+a+"%",o[ix].inner.style.top="-"+a+"%")}};e(window).resize(function(){p(),u(),x(),C()}).trigger("resize"),requestAnimationFrame=window.requestAnimationFrame||function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}();var v=function(){requestAnimationFrame(v),x(),C()};v()}})}}(jQuery);


--------------------------------------------------------------------------------
/assets/basics/js/wow.min.js:
--------------------------------------------------------------------------------
1 | /*! WOW - v1.0.2 - 2014-09-24
2 | * Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else{for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)}return this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f>e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b>a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[""+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f>b;b++)e=g[b],h.push(a[""+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h>g;g++)f=i[g],c=c||e.getPropertyCSSValue("-"+f+"-"+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);


--------------------------------------------------------------------------------
/assets/midnight.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/assets/midnight.jpg


--------------------------------------------------------------------------------
/css/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | /*!
   3 | Animate.css - http://daneden.me/animate
   4 | Licensed under the MIT license - http://opensource.org/licenses/MIT
   5 | 
   6 | Copyright (c) 2014 Daniel Eden
   7 | */
   8 | 
   9 | .animated {
  10 |   -webkit-animation-duration: 1s;
  11 |           animation-duration: 1s;
  12 |   -webkit-animation-fill-mode: both;
  13 |           animation-fill-mode: both;
  14 | }
  15 | 
  16 | .animated.infinite {
  17 |   -webkit-animation-iteration-count: infinite;
  18 |           animation-iteration-count: infinite;
  19 | }
  20 | 
  21 | .animated.hinge {
  22 |   -webkit-animation-duration: 2s;
  23 |           animation-duration: 2s;
  24 | }
  25 | 
  26 | @-webkit-keyframes bounce {
  27 |   0%, 20%, 53%, 80%, 100% {
  28 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  29 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  30 |     -webkit-transform: translate3d(0,0,0);
  31 |             transform: translate3d(0,0,0);
  32 |   }
  33 | 
  34 |   40%, 43% {
  35 |     -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  36 |             transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  37 |     -webkit-transform: translate3d(0, -30px, 0);
  38 |             transform: translate3d(0, -30px, 0);
  39 |   }
  40 | 
  41 |   70% {
  42 |     -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  43 |             transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  44 |     -webkit-transform: translate3d(0, -15px, 0);
  45 |             transform: translate3d(0, -15px, 0);
  46 |   }
  47 | 
  48 |   90% {
  49 |     -webkit-transform: translate3d(0,-4px,0);
  50 |             transform: translate3d(0,-4px,0);
  51 |   }
  52 | }
  53 | 
  54 | @keyframes bounce {
  55 |   0%, 20%, 53%, 80%, 100% {
  56 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  57 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  58 |     -webkit-transform: translate3d(0,0,0);
  59 |             transform: translate3d(0,0,0);
  60 |   }
  61 | 
  62 |   40%, 43% {
  63 |     -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  64 |             transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  65 |     -webkit-transform: translate3d(0, -30px, 0);
  66 |             transform: translate3d(0, -30px, 0);
  67 |   }
  68 | 
  69 |   70% {
  70 |     -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  71 |             transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  72 |     -webkit-transform: translate3d(0, -15px, 0);
  73 |             transform: translate3d(0, -15px, 0);
  74 |   }
  75 | 
  76 |   90% {
  77 |     -webkit-transform: translate3d(0,-4px,0);
  78 |             transform: translate3d(0,-4px,0);
  79 |   }
  80 | }
  81 | 
  82 | .bounce {
  83 |   -webkit-animation-name: bounce;
  84 |           animation-name: bounce;
  85 |   -webkit-transform-origin: center bottom;
  86 |       -ms-transform-origin: center bottom;
  87 |           transform-origin: center bottom;
  88 | }
  89 | 
  90 | @-webkit-keyframes flash {
  91 |   0%, 50%, 100% {
  92 |     opacity: 1;
  93 |   }
  94 | 
  95 |   25%, 75% {
  96 |     opacity: 0;
  97 |   }
  98 | }
  99 | 
 100 | @keyframes flash {
 101 |   0%, 50%, 100% {
 102 |     opacity: 1;
 103 |   }
 104 | 
 105 |   25%, 75% {
 106 |     opacity: 0;
 107 |   }
 108 | }
 109 | 
 110 | .flash {
 111 |   -webkit-animation-name: flash;
 112 |           animation-name: flash;
 113 | }
 114 | 
 115 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 116 | 
 117 | @-webkit-keyframes pulse {
 118 |   0% {
 119 |     -webkit-transform: scale3d(1, 1, 1);
 120 |             transform: scale3d(1, 1, 1);
 121 |   }
 122 | 
 123 |   50% {
 124 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 125 |             transform: scale3d(1.05, 1.05, 1.05);
 126 |   }
 127 | 
 128 |   100% {
 129 |     -webkit-transform: scale3d(1, 1, 1);
 130 |             transform: scale3d(1, 1, 1);
 131 |   }
 132 | }
 133 | 
 134 | @keyframes pulse {
 135 |   0% {
 136 |     -webkit-transform: scale3d(1, 1, 1);
 137 |             transform: scale3d(1, 1, 1);
 138 |   }
 139 | 
 140 |   50% {
 141 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 142 |             transform: scale3d(1.05, 1.05, 1.05);
 143 |   }
 144 | 
 145 |   100% {
 146 |     -webkit-transform: scale3d(1, 1, 1);
 147 |             transform: scale3d(1, 1, 1);
 148 |   }
 149 | }
 150 | 
 151 | .pulse {
 152 |   -webkit-animation-name: pulse;
 153 |           animation-name: pulse;
 154 | }
 155 | 
 156 | @-webkit-keyframes rubberBand {
 157 |   0% {
 158 |     -webkit-transform: scale3d(1, 1, 1);
 159 |             transform: scale3d(1, 1, 1);
 160 |   }
 161 | 
 162 |   30% {
 163 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 164 |             transform: scale3d(1.25, 0.75, 1);
 165 |   }
 166 | 
 167 |   40% {
 168 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 169 |             transform: scale3d(0.75, 1.25, 1);
 170 |   }
 171 | 
 172 |   50% {
 173 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 174 |             transform: scale3d(1.15, 0.85, 1);
 175 |   }
 176 | 
 177 |   65% {
 178 |     -webkit-transform: scale3d(.95, 1.05, 1);
 179 |             transform: scale3d(.95, 1.05, 1);
 180 |   }
 181 | 
 182 |   75% {
 183 |     -webkit-transform: scale3d(1.05, .95, 1);
 184 |             transform: scale3d(1.05, .95, 1);
 185 |   }
 186 | 
 187 |   100% {
 188 |     -webkit-transform: scale3d(1, 1, 1);
 189 |             transform: scale3d(1, 1, 1);
 190 |   }
 191 | }
 192 | 
 193 | @keyframes rubberBand {
 194 |   0% {
 195 |     -webkit-transform: scale3d(1, 1, 1);
 196 |             transform: scale3d(1, 1, 1);
 197 |   }
 198 | 
 199 |   30% {
 200 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 201 |             transform: scale3d(1.25, 0.75, 1);
 202 |   }
 203 | 
 204 |   40% {
 205 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 206 |             transform: scale3d(0.75, 1.25, 1);
 207 |   }
 208 | 
 209 |   50% {
 210 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 211 |             transform: scale3d(1.15, 0.85, 1);
 212 |   }
 213 | 
 214 |   65% {
 215 |     -webkit-transform: scale3d(.95, 1.05, 1);
 216 |             transform: scale3d(.95, 1.05, 1);
 217 |   }
 218 | 
 219 |   75% {
 220 |     -webkit-transform: scale3d(1.05, .95, 1);
 221 |             transform: scale3d(1.05, .95, 1);
 222 |   }
 223 | 
 224 |   100% {
 225 |     -webkit-transform: scale3d(1, 1, 1);
 226 |             transform: scale3d(1, 1, 1);
 227 |   }
 228 | }
 229 | 
 230 | .rubberBand {
 231 |   -webkit-animation-name: rubberBand;
 232 |           animation-name: rubberBand;
 233 | }
 234 | 
 235 | @-webkit-keyframes shake {
 236 |   0%, 100% {
 237 |     -webkit-transform: translate3d(0, 0, 0);
 238 |             transform: translate3d(0, 0, 0);
 239 |   }
 240 | 
 241 |   10%, 30%, 50%, 70%, 90% {
 242 |     -webkit-transform: translate3d(-10px, 0, 0);
 243 |             transform: translate3d(-10px, 0, 0);
 244 |   }
 245 | 
 246 |   20%, 40%, 60%, 80% {
 247 |     -webkit-transform: translate3d(10px, 0, 0);
 248 |             transform: translate3d(10px, 0, 0);
 249 |   }
 250 | }
 251 | 
 252 | @keyframes shake {
 253 |   0%, 100% {
 254 |     -webkit-transform: translate3d(0, 0, 0);
 255 |             transform: translate3d(0, 0, 0);
 256 |   }
 257 | 
 258 |   10%, 30%, 50%, 70%, 90% {
 259 |     -webkit-transform: translate3d(-10px, 0, 0);
 260 |             transform: translate3d(-10px, 0, 0);
 261 |   }
 262 | 
 263 |   20%, 40%, 60%, 80% {
 264 |     -webkit-transform: translate3d(10px, 0, 0);
 265 |             transform: translate3d(10px, 0, 0);
 266 |   }
 267 | }
 268 | 
 269 | .shake {
 270 |   -webkit-animation-name: shake;
 271 |           animation-name: shake;
 272 | }
 273 | 
 274 | @-webkit-keyframes swing {
 275 |   20% {
 276 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 277 |             transform: rotate3d(0, 0, 1, 15deg);
 278 |   }
 279 | 
 280 |   40% {
 281 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 282 |             transform: rotate3d(0, 0, 1, -10deg);
 283 |   }
 284 | 
 285 |   60% {
 286 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 287 |             transform: rotate3d(0, 0, 1, 5deg);
 288 |   }
 289 | 
 290 |   80% {
 291 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 292 |             transform: rotate3d(0, 0, 1, -5deg);
 293 |   }
 294 | 
 295 |   100% {
 296 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 297 |             transform: rotate3d(0, 0, 1, 0deg);
 298 |   }
 299 | }
 300 | 
 301 | @keyframes swing {
 302 |   20% {
 303 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 304 |             transform: rotate3d(0, 0, 1, 15deg);
 305 |   }
 306 | 
 307 |   40% {
 308 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 309 |             transform: rotate3d(0, 0, 1, -10deg);
 310 |   }
 311 | 
 312 |   60% {
 313 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 314 |             transform: rotate3d(0, 0, 1, 5deg);
 315 |   }
 316 | 
 317 |   80% {
 318 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 319 |             transform: rotate3d(0, 0, 1, -5deg);
 320 |   }
 321 | 
 322 |   100% {
 323 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 324 |             transform: rotate3d(0, 0, 1, 0deg);
 325 |   }
 326 | }
 327 | 
 328 | .swing {
 329 |   -webkit-transform-origin: top center;
 330 |       -ms-transform-origin: top center;
 331 |           transform-origin: top center;
 332 |   -webkit-animation-name: swing;
 333 |           animation-name: swing;
 334 | }
 335 | 
 336 | @-webkit-keyframes tada {
 337 |   0% {
 338 |     -webkit-transform: scale3d(1, 1, 1);
 339 |             transform: scale3d(1, 1, 1);
 340 |   }
 341 | 
 342 |   10%, 20% {
 343 |     -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 344 |             transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 345 |   }
 346 | 
 347 |   30%, 50%, 70%, 90% {
 348 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 349 |             transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 350 |   }
 351 | 
 352 |   40%, 60%, 80% {
 353 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 354 |             transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 355 |   }
 356 | 
 357 |   100% {
 358 |     -webkit-transform: scale3d(1, 1, 1);
 359 |             transform: scale3d(1, 1, 1);
 360 |   }
 361 | }
 362 | 
 363 | @keyframes tada {
 364 |   0% {
 365 |     -webkit-transform: scale3d(1, 1, 1);
 366 |             transform: scale3d(1, 1, 1);
 367 |   }
 368 | 
 369 |   10%, 20% {
 370 |     -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 371 |             transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 372 |   }
 373 | 
 374 |   30%, 50%, 70%, 90% {
 375 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 376 |             transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 377 |   }
 378 | 
 379 |   40%, 60%, 80% {
 380 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 381 |             transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 382 |   }
 383 | 
 384 |   100% {
 385 |     -webkit-transform: scale3d(1, 1, 1);
 386 |             transform: scale3d(1, 1, 1);
 387 |   }
 388 | }
 389 | 
 390 | .tada {
 391 |   -webkit-animation-name: tada;
 392 |           animation-name: tada;
 393 | }
 394 | 
 395 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 396 | 
 397 | @-webkit-keyframes wobble {
 398 |   0% {
 399 |     -webkit-transform: none;
 400 |             transform: none;
 401 |   }
 402 | 
 403 |   15% {
 404 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 405 |             transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 406 |   }
 407 | 
 408 |   30% {
 409 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 410 |             transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 411 |   }
 412 | 
 413 |   45% {
 414 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 415 |             transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 416 |   }
 417 | 
 418 |   60% {
 419 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 420 |             transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 421 |   }
 422 | 
 423 |   75% {
 424 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 425 |             transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 426 |   }
 427 | 
 428 |   100% {
 429 |     -webkit-transform: none;
 430 |             transform: none;
 431 |   }
 432 | }
 433 | 
 434 | @keyframes wobble {
 435 |   0% {
 436 |     -webkit-transform: none;
 437 |             transform: none;
 438 |   }
 439 | 
 440 |   15% {
 441 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 442 |             transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 443 |   }
 444 | 
 445 |   30% {
 446 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 447 |             transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 448 |   }
 449 | 
 450 |   45% {
 451 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 452 |             transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 453 |   }
 454 | 
 455 |   60% {
 456 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 457 |             transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 458 |   }
 459 | 
 460 |   75% {
 461 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 462 |             transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 463 |   }
 464 | 
 465 |   100% {
 466 |     -webkit-transform: none;
 467 |             transform: none;
 468 |   }
 469 | }
 470 | 
 471 | .wobble {
 472 |   -webkit-animation-name: wobble;
 473 |           animation-name: wobble;
 474 | }
 475 | 
 476 | @-webkit-keyframes bounceIn {
 477 |   0%, 20%, 40%, 60%, 80%, 100% {
 478 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 479 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 480 |   }
 481 | 
 482 |   0% {
 483 |     opacity: 0;
 484 |     -webkit-transform: scale3d(.3, .3, .3);
 485 |             transform: scale3d(.3, .3, .3);
 486 |   }
 487 | 
 488 |   20% {
 489 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 490 |             transform: scale3d(1.1, 1.1, 1.1);
 491 |   }
 492 | 
 493 |   40% {
 494 |     -webkit-transform: scale3d(.9, .9, .9);
 495 |             transform: scale3d(.9, .9, .9);
 496 |   }
 497 | 
 498 |   60% {
 499 |     opacity: 1;
 500 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
 501 |             transform: scale3d(1.03, 1.03, 1.03);
 502 |   }
 503 | 
 504 |   80% {
 505 |     -webkit-transform: scale3d(.97, .97, .97);
 506 |             transform: scale3d(.97, .97, .97);
 507 |   }
 508 | 
 509 |   100% {
 510 |     opacity: 1;
 511 |     -webkit-transform: scale3d(1, 1, 1);
 512 |             transform: scale3d(1, 1, 1);
 513 |   }
 514 | }
 515 | 
 516 | @keyframes bounceIn {
 517 |   0%, 20%, 40%, 60%, 80%, 100% {
 518 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 519 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 520 |   }
 521 | 
 522 |   0% {
 523 |     opacity: 0;
 524 |     -webkit-transform: scale3d(.3, .3, .3);
 525 |             transform: scale3d(.3, .3, .3);
 526 |   }
 527 | 
 528 |   20% {
 529 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 530 |             transform: scale3d(1.1, 1.1, 1.1);
 531 |   }
 532 | 
 533 |   40% {
 534 |     -webkit-transform: scale3d(.9, .9, .9);
 535 |             transform: scale3d(.9, .9, .9);
 536 |   }
 537 | 
 538 |   60% {
 539 |     opacity: 1;
 540 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
 541 |             transform: scale3d(1.03, 1.03, 1.03);
 542 |   }
 543 | 
 544 |   80% {
 545 |     -webkit-transform: scale3d(.97, .97, .97);
 546 |             transform: scale3d(.97, .97, .97);
 547 |   }
 548 | 
 549 |   100% {
 550 |     opacity: 1;
 551 |     -webkit-transform: scale3d(1, 1, 1);
 552 |             transform: scale3d(1, 1, 1);
 553 |   }
 554 | }
 555 | 
 556 | .bounceIn {
 557 |   -webkit-animation-name: bounceIn;
 558 |           animation-name: bounceIn;
 559 |   -webkit-animation-duration: .75s;
 560 |           animation-duration: .75s;
 561 | }
 562 | 
 563 | @-webkit-keyframes bounceInDown {
 564 |   0%, 60%, 75%, 90%, 100% {
 565 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 566 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 567 |   }
 568 | 
 569 |   0% {
 570 |     opacity: 0;
 571 |     -webkit-transform: translate3d(0, -3000px, 0);
 572 |             transform: translate3d(0, -3000px, 0);
 573 |   }
 574 | 
 575 |   60% {
 576 |     opacity: 1;
 577 |     -webkit-transform: translate3d(0, 25px, 0);
 578 |             transform: translate3d(0, 25px, 0);
 579 |   }
 580 | 
 581 |   75% {
 582 |     -webkit-transform: translate3d(0, -10px, 0);
 583 |             transform: translate3d(0, -10px, 0);
 584 |   }
 585 | 
 586 |   90% {
 587 |     -webkit-transform: translate3d(0, 5px, 0);
 588 |             transform: translate3d(0, 5px, 0);
 589 |   }
 590 | 
 591 |   100% {
 592 |     -webkit-transform: none;
 593 |             transform: none;
 594 |   }
 595 | }
 596 | 
 597 | @keyframes bounceInDown {
 598 |   0%, 60%, 75%, 90%, 100% {
 599 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 600 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 601 |   }
 602 | 
 603 |   0% {
 604 |     opacity: 0;
 605 |     -webkit-transform: translate3d(0, -3000px, 0);
 606 |             transform: translate3d(0, -3000px, 0);
 607 |   }
 608 | 
 609 |   60% {
 610 |     opacity: 1;
 611 |     -webkit-transform: translate3d(0, 25px, 0);
 612 |             transform: translate3d(0, 25px, 0);
 613 |   }
 614 | 
 615 |   75% {
 616 |     -webkit-transform: translate3d(0, -10px, 0);
 617 |             transform: translate3d(0, -10px, 0);
 618 |   }
 619 | 
 620 |   90% {
 621 |     -webkit-transform: translate3d(0, 5px, 0);
 622 |             transform: translate3d(0, 5px, 0);
 623 |   }
 624 | 
 625 |   100% {
 626 |     -webkit-transform: none;
 627 |             transform: none;
 628 |   }
 629 | }
 630 | 
 631 | .bounceInDown {
 632 |   -webkit-animation-name: bounceInDown;
 633 |           animation-name: bounceInDown;
 634 | }
 635 | 
 636 | @-webkit-keyframes bounceInLeft {
 637 |   0%, 60%, 75%, 90%, 100% {
 638 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 639 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 640 |   }
 641 | 
 642 |   0% {
 643 |     opacity: 0;
 644 |     -webkit-transform: translate3d(-3000px, 0, 0);
 645 |             transform: translate3d(-3000px, 0, 0);
 646 |   }
 647 | 
 648 |   60% {
 649 |     opacity: 1;
 650 |     -webkit-transform: translate3d(25px, 0, 0);
 651 |             transform: translate3d(25px, 0, 0);
 652 |   }
 653 | 
 654 |   75% {
 655 |     -webkit-transform: translate3d(-10px, 0, 0);
 656 |             transform: translate3d(-10px, 0, 0);
 657 |   }
 658 | 
 659 |   90% {
 660 |     -webkit-transform: translate3d(5px, 0, 0);
 661 |             transform: translate3d(5px, 0, 0);
 662 |   }
 663 | 
 664 |   100% {
 665 |     -webkit-transform: none;
 666 |             transform: none;
 667 |   }
 668 | }
 669 | 
 670 | @keyframes bounceInLeft {
 671 |   0%, 60%, 75%, 90%, 100% {
 672 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 673 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 674 |   }
 675 | 
 676 |   0% {
 677 |     opacity: 0;
 678 |     -webkit-transform: translate3d(-3000px, 0, 0);
 679 |             transform: translate3d(-3000px, 0, 0);
 680 |   }
 681 | 
 682 |   60% {
 683 |     opacity: 1;
 684 |     -webkit-transform: translate3d(25px, 0, 0);
 685 |             transform: translate3d(25px, 0, 0);
 686 |   }
 687 | 
 688 |   75% {
 689 |     -webkit-transform: translate3d(-10px, 0, 0);
 690 |             transform: translate3d(-10px, 0, 0);
 691 |   }
 692 | 
 693 |   90% {
 694 |     -webkit-transform: translate3d(5px, 0, 0);
 695 |             transform: translate3d(5px, 0, 0);
 696 |   }
 697 | 
 698 |   100% {
 699 |     -webkit-transform: none;
 700 |             transform: none;
 701 |   }
 702 | }
 703 | 
 704 | .bounceInLeft {
 705 |   -webkit-animation-name: bounceInLeft;
 706 |           animation-name: bounceInLeft;
 707 | }
 708 | 
 709 | @-webkit-keyframes bounceInRight {
 710 |   0%, 60%, 75%, 90%, 100% {
 711 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 712 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 713 |   }
 714 | 
 715 |   0% {
 716 |     opacity: 0;
 717 |     -webkit-transform: translate3d(3000px, 0, 0);
 718 |             transform: translate3d(3000px, 0, 0);
 719 |   }
 720 | 
 721 |   60% {
 722 |     opacity: 1;
 723 |     -webkit-transform: translate3d(-25px, 0, 0);
 724 |             transform: translate3d(-25px, 0, 0);
 725 |   }
 726 | 
 727 |   75% {
 728 |     -webkit-transform: translate3d(10px, 0, 0);
 729 |             transform: translate3d(10px, 0, 0);
 730 |   }
 731 | 
 732 |   90% {
 733 |     -webkit-transform: translate3d(-5px, 0, 0);
 734 |             transform: translate3d(-5px, 0, 0);
 735 |   }
 736 | 
 737 |   100% {
 738 |     -webkit-transform: none;
 739 |             transform: none;
 740 |   }
 741 | }
 742 | 
 743 | @keyframes bounceInRight {
 744 |   0%, 60%, 75%, 90%, 100% {
 745 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 746 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 747 |   }
 748 | 
 749 |   0% {
 750 |     opacity: 0;
 751 |     -webkit-transform: translate3d(3000px, 0, 0);
 752 |             transform: translate3d(3000px, 0, 0);
 753 |   }
 754 | 
 755 |   60% {
 756 |     opacity: 1;
 757 |     -webkit-transform: translate3d(-25px, 0, 0);
 758 |             transform: translate3d(-25px, 0, 0);
 759 |   }
 760 | 
 761 |   75% {
 762 |     -webkit-transform: translate3d(10px, 0, 0);
 763 |             transform: translate3d(10px, 0, 0);
 764 |   }
 765 | 
 766 |   90% {
 767 |     -webkit-transform: translate3d(-5px, 0, 0);
 768 |             transform: translate3d(-5px, 0, 0);
 769 |   }
 770 | 
 771 |   100% {
 772 |     -webkit-transform: none;
 773 |             transform: none;
 774 |   }
 775 | }
 776 | 
 777 | .bounceInRight {
 778 |   -webkit-animation-name: bounceInRight;
 779 |           animation-name: bounceInRight;
 780 | }
 781 | 
 782 | @-webkit-keyframes bounceInUp {
 783 |   0%, 60%, 75%, 90%, 100% {
 784 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 785 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 786 |   }
 787 | 
 788 |   0% {
 789 |     opacity: 0;
 790 |     -webkit-transform: translate3d(0, 3000px, 0);
 791 |             transform: translate3d(0, 3000px, 0);
 792 |   }
 793 | 
 794 |   60% {
 795 |     opacity: 1;
 796 |     -webkit-transform: translate3d(0, -20px, 0);
 797 |             transform: translate3d(0, -20px, 0);
 798 |   }
 799 | 
 800 |   75% {
 801 |     -webkit-transform: translate3d(0, 10px, 0);
 802 |             transform: translate3d(0, 10px, 0);
 803 |   }
 804 | 
 805 |   90% {
 806 |     -webkit-transform: translate3d(0, -5px, 0);
 807 |             transform: translate3d(0, -5px, 0);
 808 |   }
 809 | 
 810 |   100% {
 811 |     -webkit-transform: translate3d(0, 0, 0);
 812 |             transform: translate3d(0, 0, 0);
 813 |   }
 814 | }
 815 | 
 816 | @keyframes bounceInUp {
 817 |   0%, 60%, 75%, 90%, 100% {
 818 |     -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 819 |             transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 820 |   }
 821 | 
 822 |   0% {
 823 |     opacity: 0;
 824 |     -webkit-transform: translate3d(0, 3000px, 0);
 825 |             transform: translate3d(0, 3000px, 0);
 826 |   }
 827 | 
 828 |   60% {
 829 |     opacity: 1;
 830 |     -webkit-transform: translate3d(0, -20px, 0);
 831 |             transform: translate3d(0, -20px, 0);
 832 |   }
 833 | 
 834 |   75% {
 835 |     -webkit-transform: translate3d(0, 10px, 0);
 836 |             transform: translate3d(0, 10px, 0);
 837 |   }
 838 | 
 839 |   90% {
 840 |     -webkit-transform: translate3d(0, -5px, 0);
 841 |             transform: translate3d(0, -5px, 0);
 842 |   }
 843 | 
 844 |   100% {
 845 |     -webkit-transform: translate3d(0, 0, 0);
 846 |             transform: translate3d(0, 0, 0);
 847 |   }
 848 | }
 849 | 
 850 | .bounceInUp {
 851 |   -webkit-animation-name: bounceInUp;
 852 |           animation-name: bounceInUp;
 853 | }
 854 | 
 855 | @-webkit-keyframes bounceOut {
 856 |   20% {
 857 |     -webkit-transform: scale3d(.9, .9, .9);
 858 |             transform: scale3d(.9, .9, .9);
 859 |   }
 860 | 
 861 |   50%, 55% {
 862 |     opacity: 1;
 863 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 864 |             transform: scale3d(1.1, 1.1, 1.1);
 865 |   }
 866 | 
 867 |   100% {
 868 |     opacity: 0;
 869 |     -webkit-transform: scale3d(.3, .3, .3);
 870 |             transform: scale3d(.3, .3, .3);
 871 |   }
 872 | }
 873 | 
 874 | @keyframes bounceOut {
 875 |   20% {
 876 |     -webkit-transform: scale3d(.9, .9, .9);
 877 |             transform: scale3d(.9, .9, .9);
 878 |   }
 879 | 
 880 |   50%, 55% {
 881 |     opacity: 1;
 882 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 883 |             transform: scale3d(1.1, 1.1, 1.1);
 884 |   }
 885 | 
 886 |   100% {
 887 |     opacity: 0;
 888 |     -webkit-transform: scale3d(.3, .3, .3);
 889 |             transform: scale3d(.3, .3, .3);
 890 |   }
 891 | }
 892 | 
 893 | .bounceOut {
 894 |   -webkit-animation-name: bounceOut;
 895 |           animation-name: bounceOut;
 896 |   -webkit-animation-duration: .75s;
 897 |           animation-duration: .75s;
 898 | }
 899 | 
 900 | @-webkit-keyframes bounceOutDown {
 901 |   20% {
 902 |     -webkit-transform: translate3d(0, 10px, 0);
 903 |             transform: translate3d(0, 10px, 0);
 904 |   }
 905 | 
 906 |   40%, 45% {
 907 |     opacity: 1;
 908 |     -webkit-transform: translate3d(0, -20px, 0);
 909 |             transform: translate3d(0, -20px, 0);
 910 |   }
 911 | 
 912 |   100% {
 913 |     opacity: 0;
 914 |     -webkit-transform: translate3d(0, 2000px, 0);
 915 |             transform: translate3d(0, 2000px, 0);
 916 |   }
 917 | }
 918 | 
 919 | @keyframes bounceOutDown {
 920 |   20% {
 921 |     -webkit-transform: translate3d(0, 10px, 0);
 922 |             transform: translate3d(0, 10px, 0);
 923 |   }
 924 | 
 925 |   40%, 45% {
 926 |     opacity: 1;
 927 |     -webkit-transform: translate3d(0, -20px, 0);
 928 |             transform: translate3d(0, -20px, 0);
 929 |   }
 930 | 
 931 |   100% {
 932 |     opacity: 0;
 933 |     -webkit-transform: translate3d(0, 2000px, 0);
 934 |             transform: translate3d(0, 2000px, 0);
 935 |   }
 936 | }
 937 | 
 938 | .bounceOutDown {
 939 |   -webkit-animation-name: bounceOutDown;
 940 |           animation-name: bounceOutDown;
 941 | }
 942 | 
 943 | @-webkit-keyframes bounceOutLeft {
 944 |   20% {
 945 |     opacity: 1;
 946 |     -webkit-transform: translate3d(20px, 0, 0);
 947 |             transform: translate3d(20px, 0, 0);
 948 |   }
 949 | 
 950 |   100% {
 951 |     opacity: 0;
 952 |     -webkit-transform: translate3d(-2000px, 0, 0);
 953 |             transform: translate3d(-2000px, 0, 0);
 954 |   }
 955 | }
 956 | 
 957 | @keyframes bounceOutLeft {
 958 |   20% {
 959 |     opacity: 1;
 960 |     -webkit-transform: translate3d(20px, 0, 0);
 961 |             transform: translate3d(20px, 0, 0);
 962 |   }
 963 | 
 964 |   100% {
 965 |     opacity: 0;
 966 |     -webkit-transform: translate3d(-2000px, 0, 0);
 967 |             transform: translate3d(-2000px, 0, 0);
 968 |   }
 969 | }
 970 | 
 971 | .bounceOutLeft {
 972 |   -webkit-animation-name: bounceOutLeft;
 973 |           animation-name: bounceOutLeft;
 974 | }
 975 | 
 976 | @-webkit-keyframes bounceOutRight {
 977 |   20% {
 978 |     opacity: 1;
 979 |     -webkit-transform: translate3d(-20px, 0, 0);
 980 |             transform: translate3d(-20px, 0, 0);
 981 |   }
 982 | 
 983 |   100% {
 984 |     opacity: 0;
 985 |     -webkit-transform: translate3d(2000px, 0, 0);
 986 |             transform: translate3d(2000px, 0, 0);
 987 |   }
 988 | }
 989 | 
 990 | @keyframes bounceOutRight {
 991 |   20% {
 992 |     opacity: 1;
 993 |     -webkit-transform: translate3d(-20px, 0, 0);
 994 |             transform: translate3d(-20px, 0, 0);
 995 |   }
 996 | 
 997 |   100% {
 998 |     opacity: 0;
 999 |     -webkit-transform: translate3d(2000px, 0, 0);
1000 |             transform: translate3d(2000px, 0, 0);
1001 |   }
1002 | }
1003 | 
1004 | .bounceOutRight {
1005 |   -webkit-animation-name: bounceOutRight;
1006 |           animation-name: bounceOutRight;
1007 | }
1008 | 
1009 | @-webkit-keyframes bounceOutUp {
1010 |   20% {
1011 |     -webkit-transform: translate3d(0, -10px, 0);
1012 |             transform: translate3d(0, -10px, 0);
1013 |   }
1014 | 
1015 |   40%, 45% {
1016 |     opacity: 1;
1017 |     -webkit-transform: translate3d(0, 20px, 0);
1018 |             transform: translate3d(0, 20px, 0);
1019 |   }
1020 | 
1021 |   100% {
1022 |     opacity: 0;
1023 |     -webkit-transform: translate3d(0, -2000px, 0);
1024 |             transform: translate3d(0, -2000px, 0);
1025 |   }
1026 | }
1027 | 
1028 | @keyframes bounceOutUp {
1029 |   20% {
1030 |     -webkit-transform: translate3d(0, -10px, 0);
1031 |             transform: translate3d(0, -10px, 0);
1032 |   }
1033 | 
1034 |   40%, 45% {
1035 |     opacity: 1;
1036 |     -webkit-transform: translate3d(0, 20px, 0);
1037 |             transform: translate3d(0, 20px, 0);
1038 |   }
1039 | 
1040 |   100% {
1041 |     opacity: 0;
1042 |     -webkit-transform: translate3d(0, -2000px, 0);
1043 |             transform: translate3d(0, -2000px, 0);
1044 |   }
1045 | }
1046 | 
1047 | .bounceOutUp {
1048 |   -webkit-animation-name: bounceOutUp;
1049 |           animation-name: bounceOutUp;
1050 | }
1051 | 
1052 | @-webkit-keyframes fadeIn {
1053 |   0% {opacity: 0;}
1054 |   100% {opacity: 1;}
1055 | }
1056 | 
1057 | @keyframes fadeIn {
1058 |   0% {opacity: 0;}
1059 |   100% {opacity: 1;}
1060 | }
1061 | 
1062 | .fadeIn {
1063 |   -webkit-animation-name: fadeIn;
1064 |           animation-name: fadeIn;
1065 | }
1066 | 
1067 | @-webkit-keyframes fadeInDown {
1068 |   0% {
1069 |     opacity: 0;
1070 |     -webkit-transform: translate3d(0, -100%, 0);
1071 |             transform: translate3d(0, -100%, 0);
1072 |   }
1073 | 
1074 |   100% {
1075 |     opacity: 1;
1076 |     -webkit-transform: none;
1077 |             transform: none;
1078 |   }
1079 | }
1080 | 
1081 | @keyframes fadeInDown {
1082 |   0% {
1083 |     opacity: 0;
1084 |     -webkit-transform: translate3d(0, -100%, 0);
1085 |             transform: translate3d(0, -100%, 0);
1086 |   }
1087 | 
1088 |   100% {
1089 |     opacity: 1;
1090 |     -webkit-transform: none;
1091 |             transform: none;
1092 |   }
1093 | }
1094 | 
1095 | .fadeInDown {
1096 |   -webkit-animation-name: fadeInDown;
1097 |           animation-name: fadeInDown;
1098 | }
1099 | 
1100 | @-webkit-keyframes fadeInDownBig {
1101 |   0% {
1102 |     opacity: 0;
1103 |     -webkit-transform: translate3d(0, -2000px, 0);
1104 |             transform: translate3d(0, -2000px, 0);
1105 |   }
1106 | 
1107 |   100% {
1108 |     opacity: 1;
1109 |     -webkit-transform: none;
1110 |             transform: none;
1111 |   }
1112 | }
1113 | 
1114 | @keyframes fadeInDownBig {
1115 |   0% {
1116 |     opacity: 0;
1117 |     -webkit-transform: translate3d(0, -2000px, 0);
1118 |             transform: translate3d(0, -2000px, 0);
1119 |   }
1120 | 
1121 |   100% {
1122 |     opacity: 1;
1123 |     -webkit-transform: none;
1124 |             transform: none;
1125 |   }
1126 | }
1127 | 
1128 | .fadeInDownBig {
1129 |   -webkit-animation-name: fadeInDownBig;
1130 |           animation-name: fadeInDownBig;
1131 | }
1132 | 
1133 | @-webkit-keyframes fadeInLeft {
1134 |   0% {
1135 |     opacity: 0;
1136 |     -webkit-transform: translate3d(-100%, 0, 0);
1137 |             transform: translate3d(-100%, 0, 0);
1138 |   }
1139 | 
1140 |   100% {
1141 |     opacity: 1;
1142 |     -webkit-transform: none;
1143 |             transform: none;
1144 |   }
1145 | }
1146 | 
1147 | @keyframes fadeInLeft {
1148 |   0% {
1149 |     opacity: 0;
1150 |     -webkit-transform: translate3d(-100%, 0, 0);
1151 |             transform: translate3d(-100%, 0, 0);
1152 |   }
1153 | 
1154 |   100% {
1155 |     opacity: 1;
1156 |     -webkit-transform: none;
1157 |             transform: none;
1158 |   }
1159 | }
1160 | 
1161 | .fadeInLeft {
1162 |   -webkit-animation-name: fadeInLeft;
1163 |           animation-name: fadeInLeft;
1164 | }
1165 | 
1166 | @-webkit-keyframes fadeInLeftBig {
1167 |   0% {
1168 |     opacity: 0;
1169 |     -webkit-transform: translate3d(-2000px, 0, 0);
1170 |             transform: translate3d(-2000px, 0, 0);
1171 |   }
1172 | 
1173 |   100% {
1174 |     opacity: 1;
1175 |     -webkit-transform: none;
1176 |             transform: none;
1177 |   }
1178 | }
1179 | 
1180 | @keyframes fadeInLeftBig {
1181 |   0% {
1182 |     opacity: 0;
1183 |     -webkit-transform: translate3d(-2000px, 0, 0);
1184 |             transform: translate3d(-2000px, 0, 0);
1185 |   }
1186 | 
1187 |   100% {
1188 |     opacity: 1;
1189 |     -webkit-transform: none;
1190 |             transform: none;
1191 |   }
1192 | }
1193 | 
1194 | .fadeInLeftBig {
1195 |   -webkit-animation-name: fadeInLeftBig;
1196 |           animation-name: fadeInLeftBig;
1197 | }
1198 | 
1199 | @-webkit-keyframes fadeInRight {
1200 |   0% {
1201 |     opacity: 0;
1202 |     -webkit-transform: translate3d(100%, 0, 0);
1203 |             transform: translate3d(100%, 0, 0);
1204 |   }
1205 | 
1206 |   100% {
1207 |     opacity: 1;
1208 |     -webkit-transform: none;
1209 |             transform: none;
1210 |   }
1211 | }
1212 | 
1213 | @keyframes fadeInRight {
1214 |   0% {
1215 |     opacity: 0;
1216 |     -webkit-transform: translate3d(100%, 0, 0);
1217 |             transform: translate3d(100%, 0, 0);
1218 |   }
1219 | 
1220 |   100% {
1221 |     opacity: 1;
1222 |     -webkit-transform: none;
1223 |             transform: none;
1224 |   }
1225 | }
1226 | 
1227 | .fadeInRight {
1228 |   -webkit-animation-name: fadeInRight;
1229 |           animation-name: fadeInRight;
1230 | }
1231 | 
1232 | @-webkit-keyframes fadeInRightBig {
1233 |   0% {
1234 |     opacity: 0;
1235 |     -webkit-transform: translate3d(2000px, 0, 0);
1236 |             transform: translate3d(2000px, 0, 0);
1237 |   }
1238 | 
1239 |   100% {
1240 |     opacity: 1;
1241 |     -webkit-transform: none;
1242 |             transform: none;
1243 |   }
1244 | }
1245 | 
1246 | @keyframes fadeInRightBig {
1247 |   0% {
1248 |     opacity: 0;
1249 |     -webkit-transform: translate3d(2000px, 0, 0);
1250 |             transform: translate3d(2000px, 0, 0);
1251 |   }
1252 | 
1253 |   100% {
1254 |     opacity: 1;
1255 |     -webkit-transform: none;
1256 |             transform: none;
1257 |   }
1258 | }
1259 | 
1260 | .fadeInRightBig {
1261 |   -webkit-animation-name: fadeInRightBig;
1262 |           animation-name: fadeInRightBig;
1263 | }
1264 | 
1265 | @-webkit-keyframes fadeInUp {
1266 |   0% {
1267 |     opacity: 0;
1268 |     -webkit-transform: translate3d(0, 100%, 0);
1269 |             transform: translate3d(0, 100%, 0);
1270 |   }
1271 | 
1272 |   100% {
1273 |     opacity: 1;
1274 |     -webkit-transform: none;
1275 |             transform: none;
1276 |   }
1277 | }
1278 | 
1279 | @keyframes fadeInUp {
1280 |   0% {
1281 |     opacity: 0;
1282 |     -webkit-transform: translate3d(0, 100%, 0);
1283 |             transform: translate3d(0, 100%, 0);
1284 |   }
1285 | 
1286 |   100% {
1287 |     opacity: 1;
1288 |     -webkit-transform: none;
1289 |             transform: none;
1290 |   }
1291 | }
1292 | 
1293 | .fadeInUp {
1294 |   -webkit-animation-name: fadeInUp;
1295 |           animation-name: fadeInUp;
1296 | }
1297 | 
1298 | @-webkit-keyframes fadeInUpBig {
1299 |   0% {
1300 |     opacity: 0;
1301 |     -webkit-transform: translate3d(0, 2000px, 0);
1302 |             transform: translate3d(0, 2000px, 0);
1303 |   }
1304 | 
1305 |   100% {
1306 |     opacity: 1;
1307 |     -webkit-transform: none;
1308 |             transform: none;
1309 |   }
1310 | }
1311 | 
1312 | @keyframes fadeInUpBig {
1313 |   0% {
1314 |     opacity: 0;
1315 |     -webkit-transform: translate3d(0, 2000px, 0);
1316 |             transform: translate3d(0, 2000px, 0);
1317 |   }
1318 | 
1319 |   100% {
1320 |     opacity: 1;
1321 |     -webkit-transform: none;
1322 |             transform: none;
1323 |   }
1324 | }
1325 | 
1326 | .fadeInUpBig {
1327 |   -webkit-animation-name: fadeInUpBig;
1328 |           animation-name: fadeInUpBig;
1329 | }
1330 | 
1331 | @-webkit-keyframes fadeOut {
1332 |   0% {opacity: 1;}
1333 |   100% {opacity: 0;}
1334 | }
1335 | 
1336 | @keyframes fadeOut {
1337 |   0% {opacity: 1;}
1338 |   100% {opacity: 0;}
1339 | }
1340 | 
1341 | .fadeOut {
1342 |   -webkit-animation-name: fadeOut;
1343 |           animation-name: fadeOut;
1344 | }
1345 | 
1346 | @-webkit-keyframes fadeOutDown {
1347 |   0% {
1348 |     opacity: 1;
1349 |   }
1350 | 
1351 |   100% {
1352 |     opacity: 0;
1353 |     -webkit-transform: translate3d(0, 100%, 0);
1354 |             transform: translate3d(0, 100%, 0);
1355 |   }
1356 | }
1357 | 
1358 | @keyframes fadeOutDown {
1359 |   0% {
1360 |     opacity: 1;
1361 |   }
1362 | 
1363 |   100% {
1364 |     opacity: 0;
1365 |     -webkit-transform: translate3d(0, 100%, 0);
1366 |             transform: translate3d(0, 100%, 0);
1367 |   }
1368 | }
1369 | 
1370 | .fadeOutDown {
1371 |   -webkit-animation-name: fadeOutDown;
1372 |           animation-name: fadeOutDown;
1373 | }
1374 | 
1375 | @-webkit-keyframes fadeOutDownBig {
1376 |   0% {
1377 |     opacity: 1;
1378 |   }
1379 | 
1380 |   100% {
1381 |     opacity: 0;
1382 |     -webkit-transform: translate3d(0, 2000px, 0);
1383 |             transform: translate3d(0, 2000px, 0);
1384 |   }
1385 | }
1386 | 
1387 | @keyframes fadeOutDownBig {
1388 |   0% {
1389 |     opacity: 1;
1390 |   }
1391 | 
1392 |   100% {
1393 |     opacity: 0;
1394 |     -webkit-transform: translate3d(0, 2000px, 0);
1395 |             transform: translate3d(0, 2000px, 0);
1396 |   }
1397 | }
1398 | 
1399 | .fadeOutDownBig {
1400 |   -webkit-animation-name: fadeOutDownBig;
1401 |           animation-name: fadeOutDownBig;
1402 | }
1403 | 
1404 | @-webkit-keyframes fadeOutLeft {
1405 |   0% {
1406 |     opacity: 1;
1407 |   }
1408 | 
1409 |   100% {
1410 |     opacity: 0;
1411 |     -webkit-transform: translate3d(-100%, 0, 0);
1412 |             transform: translate3d(-100%, 0, 0);
1413 |   }
1414 | }
1415 | 
1416 | @keyframes fadeOutLeft {
1417 |   0% {
1418 |     opacity: 1;
1419 |   }
1420 | 
1421 |   100% {
1422 |     opacity: 0;
1423 |     -webkit-transform: translate3d(-100%, 0, 0);
1424 |             transform: translate3d(-100%, 0, 0);
1425 |   }
1426 | }
1427 | 
1428 | .fadeOutLeft {
1429 |   -webkit-animation-name: fadeOutLeft;
1430 |           animation-name: fadeOutLeft;
1431 | }
1432 | 
1433 | @-webkit-keyframes fadeOutLeftBig {
1434 |   0% {
1435 |     opacity: 1;
1436 |   }
1437 | 
1438 |   100% {
1439 |     opacity: 0;
1440 |     -webkit-transform: translate3d(-2000px, 0, 0);
1441 |             transform: translate3d(-2000px, 0, 0);
1442 |   }
1443 | }
1444 | 
1445 | @keyframes fadeOutLeftBig {
1446 |   0% {
1447 |     opacity: 1;
1448 |   }
1449 | 
1450 |   100% {
1451 |     opacity: 0;
1452 |     -webkit-transform: translate3d(-2000px, 0, 0);
1453 |             transform: translate3d(-2000px, 0, 0);
1454 |   }
1455 | }
1456 | 
1457 | .fadeOutLeftBig {
1458 |   -webkit-animation-name: fadeOutLeftBig;
1459 |           animation-name: fadeOutLeftBig;
1460 | }
1461 | 
1462 | @-webkit-keyframes fadeOutRight {
1463 |   0% {
1464 |     opacity: 1;
1465 |   }
1466 | 
1467 |   100% {
1468 |     opacity: 0;
1469 |     -webkit-transform: translate3d(100%, 0, 0);
1470 |             transform: translate3d(100%, 0, 0);
1471 |   }
1472 | }
1473 | 
1474 | @keyframes fadeOutRight {
1475 |   0% {
1476 |     opacity: 1;
1477 |   }
1478 | 
1479 |   100% {
1480 |     opacity: 0;
1481 |     -webkit-transform: translate3d(100%, 0, 0);
1482 |             transform: translate3d(100%, 0, 0);
1483 |   }
1484 | }
1485 | 
1486 | .fadeOutRight {
1487 |   -webkit-animation-name: fadeOutRight;
1488 |           animation-name: fadeOutRight;
1489 | }
1490 | 
1491 | @-webkit-keyframes fadeOutRightBig {
1492 |   0% {
1493 |     opacity: 1;
1494 |   }
1495 | 
1496 |   100% {
1497 |     opacity: 0;
1498 |     -webkit-transform: translate3d(2000px, 0, 0);
1499 |             transform: translate3d(2000px, 0, 0);
1500 |   }
1501 | }
1502 | 
1503 | @keyframes fadeOutRightBig {
1504 |   0% {
1505 |     opacity: 1;
1506 |   }
1507 | 
1508 |   100% {
1509 |     opacity: 0;
1510 |     -webkit-transform: translate3d(2000px, 0, 0);
1511 |             transform: translate3d(2000px, 0, 0);
1512 |   }
1513 | }
1514 | 
1515 | .fadeOutRightBig {
1516 |   -webkit-animation-name: fadeOutRightBig;
1517 |           animation-name: fadeOutRightBig;
1518 | }
1519 | 
1520 | @-webkit-keyframes fadeOutUp {
1521 |   0% {
1522 |     opacity: 1;
1523 |   }
1524 | 
1525 |   100% {
1526 |     opacity: 0;
1527 |     -webkit-transform: translate3d(0, -100%, 0);
1528 |             transform: translate3d(0, -100%, 0);
1529 |   }
1530 | }
1531 | 
1532 | @keyframes fadeOutUp {
1533 |   0% {
1534 |     opacity: 1;
1535 |   }
1536 | 
1537 |   100% {
1538 |     opacity: 0;
1539 |     -webkit-transform: translate3d(0, -100%, 0);
1540 |             transform: translate3d(0, -100%, 0);
1541 |   }
1542 | }
1543 | 
1544 | .fadeOutUp {
1545 |   -webkit-animation-name: fadeOutUp;
1546 |           animation-name: fadeOutUp;
1547 | }
1548 | 
1549 | @-webkit-keyframes fadeOutUpBig {
1550 |   0% {
1551 |     opacity: 1;
1552 |   }
1553 | 
1554 |   100% {
1555 |     opacity: 0;
1556 |     -webkit-transform: translate3d(0, -2000px, 0);
1557 |             transform: translate3d(0, -2000px, 0);
1558 |   }
1559 | }
1560 | 
1561 | @keyframes fadeOutUpBig {
1562 |   0% {
1563 |     opacity: 1;
1564 |   }
1565 | 
1566 |   100% {
1567 |     opacity: 0;
1568 |     -webkit-transform: translate3d(0, -2000px, 0);
1569 |             transform: translate3d(0, -2000px, 0);
1570 |   }
1571 | }
1572 | 
1573 | .fadeOutUpBig {
1574 |   -webkit-animation-name: fadeOutUpBig;
1575 |           animation-name: fadeOutUpBig;
1576 | }
1577 | 
1578 | @-webkit-keyframes flip {
1579 |   0% {
1580 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1581 |             transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1582 |     -webkit-animation-timing-function: ease-out;
1583 |             animation-timing-function: ease-out;
1584 |   }
1585 | 
1586 |   40% {
1587 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1588 |             transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1589 |     -webkit-animation-timing-function: ease-out;
1590 |             animation-timing-function: ease-out;
1591 |   }
1592 | 
1593 |   50% {
1594 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1595 |             transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1596 |     -webkit-animation-timing-function: ease-in;
1597 |             animation-timing-function: ease-in;
1598 |   }
1599 | 
1600 |   80% {
1601 |     -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1602 |             transform: perspective(400px) scale3d(.95, .95, .95);
1603 |     -webkit-animation-timing-function: ease-in;
1604 |             animation-timing-function: ease-in;
1605 |   }
1606 | 
1607 |   100% {
1608 |     -webkit-transform: perspective(400px);
1609 |             transform: perspective(400px);
1610 |     -webkit-animation-timing-function: ease-in;
1611 |             animation-timing-function: ease-in;
1612 |   }
1613 | }
1614 | 
1615 | @keyframes flip {
1616 |   0% {
1617 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1618 |             transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1619 |     -webkit-animation-timing-function: ease-out;
1620 |             animation-timing-function: ease-out;
1621 |   }
1622 | 
1623 |   40% {
1624 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1625 |             transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1626 |     -webkit-animation-timing-function: ease-out;
1627 |             animation-timing-function: ease-out;
1628 |   }
1629 | 
1630 |   50% {
1631 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1632 |             transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1633 |     -webkit-animation-timing-function: ease-in;
1634 |             animation-timing-function: ease-in;
1635 |   }
1636 | 
1637 |   80% {
1638 |     -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1639 |             transform: perspective(400px) scale3d(.95, .95, .95);
1640 |     -webkit-animation-timing-function: ease-in;
1641 |             animation-timing-function: ease-in;
1642 |   }
1643 | 
1644 |   100% {
1645 |     -webkit-transform: perspective(400px);
1646 |             transform: perspective(400px);
1647 |     -webkit-animation-timing-function: ease-in;
1648 |             animation-timing-function: ease-in;
1649 |   }
1650 | }
1651 | 
1652 | .animated.flip {
1653 |   -webkit-backface-visibility: visible;
1654 |           backface-visibility: visible;
1655 |   -webkit-animation-name: flip;
1656 |           animation-name: flip;
1657 | }
1658 | 
1659 | @-webkit-keyframes flipInX {
1660 |   0% {
1661 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1662 |             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1663 |     -webkit-transition-timing-function: ease-in;
1664 |             transition-timing-function: ease-in;
1665 |     opacity: 0;
1666 |   }
1667 | 
1668 |   40% {
1669 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1670 |             transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1671 |     -webkit-transition-timing-function: ease-in;
1672 |             transition-timing-function: ease-in;
1673 |   }
1674 | 
1675 |   60% {
1676 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1677 |             transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1678 |     opacity: 1;
1679 |   }
1680 | 
1681 |   80% {
1682 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1683 |             transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1684 |   }
1685 | 
1686 |   100% {
1687 |     -webkit-transform: perspective(400px);
1688 |             transform: perspective(400px);
1689 |   }
1690 | }
1691 | 
1692 | @keyframes flipInX {
1693 |   0% {
1694 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1695 |             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1696 |     -webkit-transition-timing-function: ease-in;
1697 |             transition-timing-function: ease-in;
1698 |     opacity: 0;
1699 |   }
1700 | 
1701 |   40% {
1702 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1703 |             transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1704 |     -webkit-transition-timing-function: ease-in;
1705 |             transition-timing-function: ease-in;
1706 |   }
1707 | 
1708 |   60% {
1709 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1710 |             transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1711 |     opacity: 1;
1712 |   }
1713 | 
1714 |   80% {
1715 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1716 |             transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1717 |   }
1718 | 
1719 |   100% {
1720 |     -webkit-transform: perspective(400px);
1721 |             transform: perspective(400px);
1722 |   }
1723 | }
1724 | 
1725 | .flipInX {
1726 |   -webkit-backface-visibility: visible !important;
1727 |           backface-visibility: visible !important;
1728 |   -webkit-animation-name: flipInX;
1729 |           animation-name: flipInX;
1730 | }
1731 | 
1732 | @-webkit-keyframes flipInY {
1733 |   0% {
1734 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1735 |             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1736 |     -webkit-transition-timing-function: ease-in;
1737 |             transition-timing-function: ease-in;
1738 |     opacity: 0;
1739 |   }
1740 | 
1741 |   40% {
1742 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1743 |             transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1744 |     -webkit-transition-timing-function: ease-in;
1745 |             transition-timing-function: ease-in;
1746 |   }
1747 | 
1748 |   60% {
1749 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1750 |             transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1751 |     opacity: 1;
1752 |   }
1753 | 
1754 |   80% {
1755 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1756 |             transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1757 |   }
1758 | 
1759 |   100% {
1760 |     -webkit-transform: perspective(400px);
1761 |             transform: perspective(400px);
1762 |   }
1763 | }
1764 | 
1765 | @keyframes flipInY {
1766 |   0% {
1767 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1768 |             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1769 |     -webkit-transition-timing-function: ease-in;
1770 |             transition-timing-function: ease-in;
1771 |     opacity: 0;
1772 |   }
1773 | 
1774 |   40% {
1775 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1776 |             transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1777 |     -webkit-transition-timing-function: ease-in;
1778 |             transition-timing-function: ease-in;
1779 |   }
1780 | 
1781 |   60% {
1782 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1783 |             transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1784 |     opacity: 1;
1785 |   }
1786 | 
1787 |   80% {
1788 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1789 |             transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1790 |   }
1791 | 
1792 |   100% {
1793 |     -webkit-transform: perspective(400px);
1794 |             transform: perspective(400px);
1795 |   }
1796 | }
1797 | 
1798 | .flipInY {
1799 |   -webkit-backface-visibility: visible !important;
1800 |           backface-visibility: visible !important;
1801 |   -webkit-animation-name: flipInY;
1802 |           animation-name: flipInY;
1803 | }
1804 | 
1805 | @-webkit-keyframes flipOutX {
1806 |   0% {
1807 |     -webkit-transform: perspective(400px);
1808 |             transform: perspective(400px);
1809 |   }
1810 | 
1811 |   30% {
1812 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1813 |             transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1814 |     opacity: 1;
1815 |   }
1816 | 
1817 |   100% {
1818 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1819 |             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1820 |     opacity: 0;
1821 |   }
1822 | }
1823 | 
1824 | @keyframes flipOutX {
1825 |   0% {
1826 |     -webkit-transform: perspective(400px);
1827 |             transform: perspective(400px);
1828 |   }
1829 | 
1830 |   30% {
1831 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1832 |             transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1833 |     opacity: 1;
1834 |   }
1835 | 
1836 |   100% {
1837 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1838 |             transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1839 |     opacity: 0;
1840 |   }
1841 | }
1842 | 
1843 | .flipOutX {
1844 |   -webkit-animation-name: flipOutX;
1845 |           animation-name: flipOutX;
1846 |   -webkit-animation-duration: .75s;
1847 |           animation-duration: .75s;
1848 |   -webkit-backface-visibility: visible !important;
1849 |           backface-visibility: visible !important;
1850 | }
1851 | 
1852 | @-webkit-keyframes flipOutY {
1853 |   0% {
1854 |     -webkit-transform: perspective(400px);
1855 |             transform: perspective(400px);
1856 |   }
1857 | 
1858 |   30% {
1859 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1860 |             transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1861 |     opacity: 1;
1862 |   }
1863 | 
1864 |   100% {
1865 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1866 |             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1867 |     opacity: 0;
1868 |   }
1869 | }
1870 | 
1871 | @keyframes flipOutY {
1872 |   0% {
1873 |     -webkit-transform: perspective(400px);
1874 |             transform: perspective(400px);
1875 |   }
1876 | 
1877 |   30% {
1878 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1879 |             transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
1880 |     opacity: 1;
1881 |   }
1882 | 
1883 |   100% {
1884 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1885 |             transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1886 |     opacity: 0;
1887 |   }
1888 | }
1889 | 
1890 | .flipOutY {
1891 |   -webkit-backface-visibility: visible !important;
1892 |           backface-visibility: visible !important;
1893 |   -webkit-animation-name: flipOutY;
1894 |           animation-name: flipOutY;
1895 |   -webkit-animation-duration: .75s;
1896 |           animation-duration: .75s;
1897 | }
1898 | 
1899 | @-webkit-keyframes lightSpeedIn {
1900 |   0% {
1901 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1902 |             transform: translate3d(100%, 0, 0) skewX(-30deg);
1903 |     opacity: 0;
1904 |   }
1905 | 
1906 |   60% {
1907 |     -webkit-transform: skewX(20deg);
1908 |             transform: skewX(20deg);
1909 |     opacity: 1;
1910 |   }
1911 | 
1912 |   80% {
1913 |     -webkit-transform: skewX(-5deg);
1914 |             transform: skewX(-5deg);
1915 |     opacity: 1;
1916 |   }
1917 | 
1918 |   100% {
1919 |     -webkit-transform: none;
1920 |             transform: none;
1921 |     opacity: 1;
1922 |   }
1923 | }
1924 | 
1925 | @keyframes lightSpeedIn {
1926 |   0% {
1927 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
1928 |             transform: translate3d(100%, 0, 0) skewX(-30deg);
1929 |     opacity: 0;
1930 |   }
1931 | 
1932 |   60% {
1933 |     -webkit-transform: skewX(20deg);
1934 |             transform: skewX(20deg);
1935 |     opacity: 1;
1936 |   }
1937 | 
1938 |   80% {
1939 |     -webkit-transform: skewX(-5deg);
1940 |             transform: skewX(-5deg);
1941 |     opacity: 1;
1942 |   }
1943 | 
1944 |   100% {
1945 |     -webkit-transform: none;
1946 |             transform: none;
1947 |     opacity: 1;
1948 |   }
1949 | }
1950 | 
1951 | .lightSpeedIn {
1952 |   -webkit-animation-name: lightSpeedIn;
1953 |           animation-name: lightSpeedIn;
1954 |   -webkit-animation-timing-function: ease-out;
1955 |           animation-timing-function: ease-out;
1956 | }
1957 | 
1958 | @-webkit-keyframes lightSpeedOut {
1959 |   0% {
1960 |     opacity: 1;
1961 |   }
1962 | 
1963 |   100% {
1964 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1965 |             transform: translate3d(100%, 0, 0) skewX(30deg);
1966 |     opacity: 0;
1967 |   }
1968 | }
1969 | 
1970 | @keyframes lightSpeedOut {
1971 |   0% {
1972 |     opacity: 1;
1973 |   }
1974 | 
1975 |   100% {
1976 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
1977 |             transform: translate3d(100%, 0, 0) skewX(30deg);
1978 |     opacity: 0;
1979 |   }
1980 | }
1981 | 
1982 | .lightSpeedOut {
1983 |   -webkit-animation-name: lightSpeedOut;
1984 |           animation-name: lightSpeedOut;
1985 |   -webkit-animation-timing-function: ease-in;
1986 |           animation-timing-function: ease-in;
1987 | }
1988 | 
1989 | @-webkit-keyframes rotateIn {
1990 |   0% {
1991 |     -webkit-transform-origin: center;
1992 |             transform-origin: center;
1993 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
1994 |             transform: rotate3d(0, 0, 1, -200deg);
1995 |     opacity: 0;
1996 |   }
1997 | 
1998 |   100% {
1999 |     -webkit-transform-origin: center;
2000 |             transform-origin: center;
2001 |     -webkit-transform: none;
2002 |             transform: none;
2003 |     opacity: 1;
2004 |   }
2005 | }
2006 | 
2007 | @keyframes rotateIn {
2008 |   0% {
2009 |     -webkit-transform-origin: center;
2010 |             transform-origin: center;
2011 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
2012 |             transform: rotate3d(0, 0, 1, -200deg);
2013 |     opacity: 0;
2014 |   }
2015 | 
2016 |   100% {
2017 |     -webkit-transform-origin: center;
2018 |             transform-origin: center;
2019 |     -webkit-transform: none;
2020 |             transform: none;
2021 |     opacity: 1;
2022 |   }
2023 | }
2024 | 
2025 | .rotateIn {
2026 |   -webkit-animation-name: rotateIn;
2027 |           animation-name: rotateIn;
2028 | }
2029 | 
2030 | @-webkit-keyframes rotateInDownLeft {
2031 |   0% {
2032 |     -webkit-transform-origin: left bottom;
2033 |             transform-origin: left bottom;
2034 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2035 |             transform: rotate3d(0, 0, 1, -45deg);
2036 |     opacity: 0;
2037 |   }
2038 | 
2039 |   100% {
2040 |     -webkit-transform-origin: left bottom;
2041 |             transform-origin: left bottom;
2042 |     -webkit-transform: none;
2043 |             transform: none;
2044 |     opacity: 1;
2045 |   }
2046 | }
2047 | 
2048 | @keyframes rotateInDownLeft {
2049 |   0% {
2050 |     -webkit-transform-origin: left bottom;
2051 |             transform-origin: left bottom;
2052 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2053 |             transform: rotate3d(0, 0, 1, -45deg);
2054 |     opacity: 0;
2055 |   }
2056 | 
2057 |   100% {
2058 |     -webkit-transform-origin: left bottom;
2059 |             transform-origin: left bottom;
2060 |     -webkit-transform: none;
2061 |             transform: none;
2062 |     opacity: 1;
2063 |   }
2064 | }
2065 | 
2066 | .rotateInDownLeft {
2067 |   -webkit-animation-name: rotateInDownLeft;
2068 |           animation-name: rotateInDownLeft;
2069 | }
2070 | 
2071 | @-webkit-keyframes rotateInDownRight {
2072 |   0% {
2073 |     -webkit-transform-origin: right bottom;
2074 |             transform-origin: right bottom;
2075 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2076 |             transform: rotate3d(0, 0, 1, 45deg);
2077 |     opacity: 0;
2078 |   }
2079 | 
2080 |   100% {
2081 |     -webkit-transform-origin: right bottom;
2082 |             transform-origin: right bottom;
2083 |     -webkit-transform: none;
2084 |             transform: none;
2085 |     opacity: 1;
2086 |   }
2087 | }
2088 | 
2089 | @keyframes rotateInDownRight {
2090 |   0% {
2091 |     -webkit-transform-origin: right bottom;
2092 |             transform-origin: right bottom;
2093 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2094 |             transform: rotate3d(0, 0, 1, 45deg);
2095 |     opacity: 0;
2096 |   }
2097 | 
2098 |   100% {
2099 |     -webkit-transform-origin: right bottom;
2100 |             transform-origin: right bottom;
2101 |     -webkit-transform: none;
2102 |             transform: none;
2103 |     opacity: 1;
2104 |   }
2105 | }
2106 | 
2107 | .rotateInDownRight {
2108 |   -webkit-animation-name: rotateInDownRight;
2109 |           animation-name: rotateInDownRight;
2110 | }
2111 | 
2112 | @-webkit-keyframes rotateInUpLeft {
2113 |   0% {
2114 |     -webkit-transform-origin: left bottom;
2115 |             transform-origin: left bottom;
2116 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2117 |             transform: rotate3d(0, 0, 1, 45deg);
2118 |     opacity: 0;
2119 |   }
2120 | 
2121 |   100% {
2122 |     -webkit-transform-origin: left bottom;
2123 |             transform-origin: left bottom;
2124 |     -webkit-transform: none;
2125 |             transform: none;
2126 |     opacity: 1;
2127 |   }
2128 | }
2129 | 
2130 | @keyframes rotateInUpLeft {
2131 |   0% {
2132 |     -webkit-transform-origin: left bottom;
2133 |             transform-origin: left bottom;
2134 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2135 |             transform: rotate3d(0, 0, 1, 45deg);
2136 |     opacity: 0;
2137 |   }
2138 | 
2139 |   100% {
2140 |     -webkit-transform-origin: left bottom;
2141 |             transform-origin: left bottom;
2142 |     -webkit-transform: none;
2143 |             transform: none;
2144 |     opacity: 1;
2145 |   }
2146 | }
2147 | 
2148 | .rotateInUpLeft {
2149 |   -webkit-animation-name: rotateInUpLeft;
2150 |           animation-name: rotateInUpLeft;
2151 | }
2152 | 
2153 | @-webkit-keyframes rotateInUpRight {
2154 |   0% {
2155 |     -webkit-transform-origin: right bottom;
2156 |             transform-origin: right bottom;
2157 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2158 |             transform: rotate3d(0, 0, 1, -90deg);
2159 |     opacity: 0;
2160 |   }
2161 | 
2162 |   100% {
2163 |     -webkit-transform-origin: right bottom;
2164 |             transform-origin: right bottom;
2165 |     -webkit-transform: none;
2166 |             transform: none;
2167 |     opacity: 1;
2168 |   }
2169 | }
2170 | 
2171 | @keyframes rotateInUpRight {
2172 |   0% {
2173 |     -webkit-transform-origin: right bottom;
2174 |             transform-origin: right bottom;
2175 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2176 |             transform: rotate3d(0, 0, 1, -90deg);
2177 |     opacity: 0;
2178 |   }
2179 | 
2180 |   100% {
2181 |     -webkit-transform-origin: right bottom;
2182 |             transform-origin: right bottom;
2183 |     -webkit-transform: none;
2184 |             transform: none;
2185 |     opacity: 1;
2186 |   }
2187 | }
2188 | 
2189 | .rotateInUpRight {
2190 |   -webkit-animation-name: rotateInUpRight;
2191 |           animation-name: rotateInUpRight;
2192 | }
2193 | 
2194 | @-webkit-keyframes rotateOut {
2195 |   0% {
2196 |     -webkit-transform-origin: center;
2197 |             transform-origin: center;
2198 |     opacity: 1;
2199 |   }
2200 | 
2201 |   100% {
2202 |     -webkit-transform-origin: center;
2203 |             transform-origin: center;
2204 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2205 |             transform: rotate3d(0, 0, 1, 200deg);
2206 |     opacity: 0;
2207 |   }
2208 | }
2209 | 
2210 | @keyframes rotateOut {
2211 |   0% {
2212 |     -webkit-transform-origin: center;
2213 |             transform-origin: center;
2214 |     opacity: 1;
2215 |   }
2216 | 
2217 |   100% {
2218 |     -webkit-transform-origin: center;
2219 |             transform-origin: center;
2220 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2221 |             transform: rotate3d(0, 0, 1, 200deg);
2222 |     opacity: 0;
2223 |   }
2224 | }
2225 | 
2226 | .rotateOut {
2227 |   -webkit-animation-name: rotateOut;
2228 |           animation-name: rotateOut;
2229 | }
2230 | 
2231 | @-webkit-keyframes rotateOutDownLeft {
2232 |   0% {
2233 |     -webkit-transform-origin: left bottom;
2234 |             transform-origin: left bottom;
2235 |     opacity: 1;
2236 |   }
2237 | 
2238 |   100% {
2239 |     -webkit-transform-origin: left bottom;
2240 |             transform-origin: left bottom;
2241 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2242 |             transform: rotate3d(0, 0, 1, 45deg);
2243 |     opacity: 0;
2244 |   }
2245 | }
2246 | 
2247 | @keyframes rotateOutDownLeft {
2248 |   0% {
2249 |     -webkit-transform-origin: left bottom;
2250 |             transform-origin: left bottom;
2251 |     opacity: 1;
2252 |   }
2253 | 
2254 |   100% {
2255 |     -webkit-transform-origin: left bottom;
2256 |             transform-origin: left bottom;
2257 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2258 |             transform: rotate3d(0, 0, 1, 45deg);
2259 |     opacity: 0;
2260 |   }
2261 | }
2262 | 
2263 | .rotateOutDownLeft {
2264 |   -webkit-animation-name: rotateOutDownLeft;
2265 |           animation-name: rotateOutDownLeft;
2266 | }
2267 | 
2268 | @-webkit-keyframes rotateOutDownRight {
2269 |   0% {
2270 |     -webkit-transform-origin: right bottom;
2271 |             transform-origin: right bottom;
2272 |     opacity: 1;
2273 |   }
2274 | 
2275 |   100% {
2276 |     -webkit-transform-origin: right bottom;
2277 |             transform-origin: right bottom;
2278 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2279 |             transform: rotate3d(0, 0, 1, -45deg);
2280 |     opacity: 0;
2281 |   }
2282 | }
2283 | 
2284 | @keyframes rotateOutDownRight {
2285 |   0% {
2286 |     -webkit-transform-origin: right bottom;
2287 |             transform-origin: right bottom;
2288 |     opacity: 1;
2289 |   }
2290 | 
2291 |   100% {
2292 |     -webkit-transform-origin: right bottom;
2293 |             transform-origin: right bottom;
2294 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2295 |             transform: rotate3d(0, 0, 1, -45deg);
2296 |     opacity: 0;
2297 |   }
2298 | }
2299 | 
2300 | .rotateOutDownRight {
2301 |   -webkit-animation-name: rotateOutDownRight;
2302 |           animation-name: rotateOutDownRight;
2303 | }
2304 | 
2305 | @-webkit-keyframes rotateOutUpLeft {
2306 |   0% {
2307 |     -webkit-transform-origin: left bottom;
2308 |             transform-origin: left bottom;
2309 |     opacity: 1;
2310 |   }
2311 | 
2312 |   100% {
2313 |     -webkit-transform-origin: left bottom;
2314 |             transform-origin: left bottom;
2315 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2316 |             transform: rotate3d(0, 0, 1, -45deg);
2317 |     opacity: 0;
2318 |   }
2319 | }
2320 | 
2321 | @keyframes rotateOutUpLeft {
2322 |   0% {
2323 |     -webkit-transform-origin: left bottom;
2324 |             transform-origin: left bottom;
2325 |     opacity: 1;
2326 |   }
2327 | 
2328 |   100% {
2329 |     -webkit-transform-origin: left bottom;
2330 |             transform-origin: left bottom;
2331 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2332 |             transform: rotate3d(0, 0, 1, -45deg);
2333 |     opacity: 0;
2334 |   }
2335 | }
2336 | 
2337 | .rotateOutUpLeft {
2338 |   -webkit-animation-name: rotateOutUpLeft;
2339 |           animation-name: rotateOutUpLeft;
2340 | }
2341 | 
2342 | @-webkit-keyframes rotateOutUpRight {
2343 |   0% {
2344 |     -webkit-transform-origin: right bottom;
2345 |             transform-origin: right bottom;
2346 |     opacity: 1;
2347 |   }
2348 | 
2349 |   100% {
2350 |     -webkit-transform-origin: right bottom;
2351 |             transform-origin: right bottom;
2352 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
2353 |             transform: rotate3d(0, 0, 1, 90deg);
2354 |     opacity: 0;
2355 |   }
2356 | }
2357 | 
2358 | @keyframes rotateOutUpRight {
2359 |   0% {
2360 |     -webkit-transform-origin: right bottom;
2361 |             transform-origin: right bottom;
2362 |     opacity: 1;
2363 |   }
2364 | 
2365 |   100% {
2366 |     -webkit-transform-origin: right bottom;
2367 |             transform-origin: right bottom;
2368 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
2369 |             transform: rotate3d(0, 0, 1, 90deg);
2370 |     opacity: 0;
2371 |   }
2372 | }
2373 | 
2374 | .rotateOutUpRight {
2375 |   -webkit-animation-name: rotateOutUpRight;
2376 |           animation-name: rotateOutUpRight;
2377 | }
2378 | 
2379 | @-webkit-keyframes hinge {
2380 |   0% {
2381 |     -webkit-transform-origin: top left;
2382 |             transform-origin: top left;
2383 |     -webkit-animation-timing-function: ease-in-out;
2384 |             animation-timing-function: ease-in-out;
2385 |   }
2386 | 
2387 |   20%, 60% {
2388 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
2389 |             transform: rotate3d(0, 0, 1, 80deg);
2390 |     -webkit-transform-origin: top left;
2391 |             transform-origin: top left;
2392 |     -webkit-animation-timing-function: ease-in-out;
2393 |             animation-timing-function: ease-in-out;
2394 |   }
2395 | 
2396 |   40%, 80% {
2397 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
2398 |             transform: rotate3d(0, 0, 1, 60deg);
2399 |     -webkit-transform-origin: top left;
2400 |             transform-origin: top left;
2401 |     -webkit-animation-timing-function: ease-in-out;
2402 |             animation-timing-function: ease-in-out;
2403 |     opacity: 1;
2404 |   }
2405 | 
2406 |   100% {
2407 |     -webkit-transform: translate3d(0, 700px, 0);
2408 |             transform: translate3d(0, 700px, 0);
2409 |     opacity: 0;
2410 |   }
2411 | }
2412 | 
2413 | @keyframes hinge {
2414 |   0% {
2415 |     -webkit-transform-origin: top left;
2416 |             transform-origin: top left;
2417 |     -webkit-animation-timing-function: ease-in-out;
2418 |             animation-timing-function: ease-in-out;
2419 |   }
2420 | 
2421 |   20%, 60% {
2422 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
2423 |             transform: rotate3d(0, 0, 1, 80deg);
2424 |     -webkit-transform-origin: top left;
2425 |             transform-origin: top left;
2426 |     -webkit-animation-timing-function: ease-in-out;
2427 |             animation-timing-function: ease-in-out;
2428 |   }
2429 | 
2430 |   40%, 80% {
2431 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
2432 |             transform: rotate3d(0, 0, 1, 60deg);
2433 |     -webkit-transform-origin: top left;
2434 |             transform-origin: top left;
2435 |     -webkit-animation-timing-function: ease-in-out;
2436 |             animation-timing-function: ease-in-out;
2437 |     opacity: 1;
2438 |   }
2439 | 
2440 |   100% {
2441 |     -webkit-transform: translate3d(0, 700px, 0);
2442 |             transform: translate3d(0, 700px, 0);
2443 |     opacity: 0;
2444 |   }
2445 | }
2446 | 
2447 | .hinge {
2448 |   -webkit-animation-name: hinge;
2449 |           animation-name: hinge;
2450 | }
2451 | 
2452 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2453 | 
2454 | @-webkit-keyframes rollIn {
2455 |   0% {
2456 |     opacity: 0;
2457 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2458 |             transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2459 |   }
2460 | 
2461 |   100% {
2462 |     opacity: 1;
2463 |     -webkit-transform: none;
2464 |             transform: none;
2465 |   }
2466 | }
2467 | 
2468 | @keyframes rollIn {
2469 |   0% {
2470 |     opacity: 0;
2471 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2472 |             transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2473 |   }
2474 | 
2475 |   100% {
2476 |     opacity: 1;
2477 |     -webkit-transform: none;
2478 |             transform: none;
2479 |   }
2480 | }
2481 | 
2482 | .rollIn {
2483 |   -webkit-animation-name: rollIn;
2484 |           animation-name: rollIn;
2485 | }
2486 | 
2487 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2488 | 
2489 | @-webkit-keyframes rollOut {
2490 |   0% {
2491 |     opacity: 1;
2492 |   }
2493 | 
2494 |   100% {
2495 |     opacity: 0;
2496 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2497 |             transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2498 |   }
2499 | }
2500 | 
2501 | @keyframes rollOut {
2502 |   0% {
2503 |     opacity: 1;
2504 |   }
2505 | 
2506 |   100% {
2507 |     opacity: 0;
2508 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2509 |             transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2510 |   }
2511 | }
2512 | 
2513 | .rollOut {
2514 |   -webkit-animation-name: rollOut;
2515 |           animation-name: rollOut;
2516 | }
2517 | 
2518 | @-webkit-keyframes zoomIn {
2519 |   0% {
2520 |     opacity: 0;
2521 |     -webkit-transform: scale3d(.3, .3, .3);
2522 |             transform: scale3d(.3, .3, .3);
2523 |   }
2524 | 
2525 |   50% {
2526 |     opacity: 1;
2527 |   }
2528 | }
2529 | 
2530 | @keyframes zoomIn {
2531 |   0% {
2532 |     opacity: 0;
2533 |     -webkit-transform: scale3d(.3, .3, .3);
2534 |             transform: scale3d(.3, .3, .3);
2535 |   }
2536 | 
2537 |   50% {
2538 |     opacity: 1;
2539 |   }
2540 | }
2541 | 
2542 | .zoomIn {
2543 |   -webkit-animation-name: zoomIn;
2544 |           animation-name: zoomIn;
2545 | }
2546 | 
2547 | @-webkit-keyframes zoomInDown {
2548 |   0% {
2549 |     opacity: 0;
2550 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2551 |             transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2552 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2553 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2554 |   }
2555 | 
2556 |   60% {
2557 |     opacity: 1;
2558 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2559 |             transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2560 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2561 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2562 |   }
2563 | }
2564 | 
2565 | @keyframes zoomInDown {
2566 |   0% {
2567 |     opacity: 0;
2568 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2569 |             transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2570 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2571 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2572 |   }
2573 | 
2574 |   60% {
2575 |     opacity: 1;
2576 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2577 |             transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2578 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2579 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2580 |   }
2581 | }
2582 | 
2583 | .zoomInDown {
2584 |   -webkit-animation-name: zoomInDown;
2585 |           animation-name: zoomInDown;
2586 | }
2587 | 
2588 | @-webkit-keyframes zoomInLeft {
2589 |   0% {
2590 |     opacity: 0;
2591 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2592 |             transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2593 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2594 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2595 |   }
2596 | 
2597 |   60% {
2598 |     opacity: 1;
2599 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2600 |             transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2601 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2602 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2603 |   }
2604 | }
2605 | 
2606 | @keyframes zoomInLeft {
2607 |   0% {
2608 |     opacity: 0;
2609 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2610 |             transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2611 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2612 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2613 |   }
2614 | 
2615 |   60% {
2616 |     opacity: 1;
2617 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2618 |             transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2619 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2620 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2621 |   }
2622 | }
2623 | 
2624 | .zoomInLeft {
2625 |   -webkit-animation-name: zoomInLeft;
2626 |           animation-name: zoomInLeft;
2627 | }
2628 | 
2629 | @-webkit-keyframes zoomInRight {
2630 |   0% {
2631 |     opacity: 0;
2632 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2633 |             transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2634 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2635 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2636 |   }
2637 | 
2638 |   60% {
2639 |     opacity: 1;
2640 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2641 |             transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2642 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2643 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2644 |   }
2645 | }
2646 | 
2647 | @keyframes zoomInRight {
2648 |   0% {
2649 |     opacity: 0;
2650 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2651 |             transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2652 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2653 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2654 |   }
2655 | 
2656 |   60% {
2657 |     opacity: 1;
2658 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2659 |             transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2660 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2661 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2662 |   }
2663 | }
2664 | 
2665 | .zoomInRight {
2666 |   -webkit-animation-name: zoomInRight;
2667 |           animation-name: zoomInRight;
2668 | }
2669 | 
2670 | @-webkit-keyframes zoomInUp {
2671 |   0% {
2672 |     opacity: 0;
2673 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2674 |             transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2675 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2676 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2677 |   }
2678 | 
2679 |   60% {
2680 |     opacity: 1;
2681 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2682 |             transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2683 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2684 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2685 |   }
2686 | }
2687 | 
2688 | @keyframes zoomInUp {
2689 |   0% {
2690 |     opacity: 0;
2691 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2692 |             transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2693 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2694 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2695 |   }
2696 | 
2697 |   60% {
2698 |     opacity: 1;
2699 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2700 |             transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2701 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2702 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2703 |   }
2704 | }
2705 | 
2706 | .zoomInUp {
2707 |   -webkit-animation-name: zoomInUp;
2708 |           animation-name: zoomInUp;
2709 | }
2710 | 
2711 | @-webkit-keyframes zoomOut {
2712 |   0% {
2713 |     opacity: 1;
2714 |   }
2715 | 
2716 |   50% {
2717 |     opacity: 0;
2718 |     -webkit-transform: scale3d(.3, .3, .3);
2719 |             transform: scale3d(.3, .3, .3);
2720 |   }
2721 | 
2722 |   100% {
2723 |     opacity: 0;
2724 |   }
2725 | }
2726 | 
2727 | @keyframes zoomOut {
2728 |   0% {
2729 |     opacity: 1;
2730 |   }
2731 | 
2732 |   50% {
2733 |     opacity: 0;
2734 |     -webkit-transform: scale3d(.3, .3, .3);
2735 |             transform: scale3d(.3, .3, .3);
2736 |   }
2737 | 
2738 |   100% {
2739 |     opacity: 0;
2740 |   }
2741 | }
2742 | 
2743 | .zoomOut {
2744 |   -webkit-animation-name: zoomOut;
2745 |           animation-name: zoomOut;
2746 | }
2747 | 
2748 | @-webkit-keyframes zoomOutDown {
2749 |   40% {
2750 |     opacity: 1;
2751 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2752 |             transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2753 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2754 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2755 |   }
2756 | 
2757 |   100% {
2758 |     opacity: 0;
2759 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2760 |             transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2761 |     -webkit-transform-origin: center bottom;
2762 |             transform-origin: center bottom;
2763 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2764 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2765 |   }
2766 | }
2767 | 
2768 | @keyframes zoomOutDown {
2769 |   40% {
2770 |     opacity: 1;
2771 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2772 |             transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2773 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2774 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2775 |   }
2776 | 
2777 |   100% {
2778 |     opacity: 0;
2779 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2780 |             transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2781 |     -webkit-transform-origin: center bottom;
2782 |             transform-origin: center bottom;
2783 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2785 |   }
2786 | }
2787 | 
2788 | .zoomOutDown {
2789 |   -webkit-animation-name: zoomOutDown;
2790 |           animation-name: zoomOutDown;
2791 | }
2792 | 
2793 | @-webkit-keyframes zoomOutLeft {
2794 |   40% {
2795 |     opacity: 1;
2796 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2797 |             transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2798 |   }
2799 | 
2800 |   100% {
2801 |     opacity: 0;
2802 |     -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2803 |             transform: scale(.1) translate3d(-2000px, 0, 0);
2804 |     -webkit-transform-origin: left center;
2805 |             transform-origin: left center;
2806 |   }
2807 | }
2808 | 
2809 | @keyframes zoomOutLeft {
2810 |   40% {
2811 |     opacity: 1;
2812 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2813 |             transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2814 |   }
2815 | 
2816 |   100% {
2817 |     opacity: 0;
2818 |     -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2819 |             transform: scale(.1) translate3d(-2000px, 0, 0);
2820 |     -webkit-transform-origin: left center;
2821 |             transform-origin: left center;
2822 |   }
2823 | }
2824 | 
2825 | .zoomOutLeft {
2826 |   -webkit-animation-name: zoomOutLeft;
2827 |           animation-name: zoomOutLeft;
2828 | }
2829 | 
2830 | @-webkit-keyframes zoomOutRight {
2831 |   40% {
2832 |     opacity: 1;
2833 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2834 |             transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2835 |   }
2836 | 
2837 |   100% {
2838 |     opacity: 0;
2839 |     -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2840 |             transform: scale(.1) translate3d(2000px, 0, 0);
2841 |     -webkit-transform-origin: right center;
2842 |             transform-origin: right center;
2843 |   }
2844 | }
2845 | 
2846 | @keyframes zoomOutRight {
2847 |   40% {
2848 |     opacity: 1;
2849 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2850 |             transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
2851 |   }
2852 | 
2853 |   100% {
2854 |     opacity: 0;
2855 |     -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
2856 |             transform: scale(.1) translate3d(2000px, 0, 0);
2857 |     -webkit-transform-origin: right center;
2858 |             transform-origin: right center;
2859 |   }
2860 | }
2861 | 
2862 | .zoomOutRight {
2863 |   -webkit-animation-name: zoomOutRight;
2864 |           animation-name: zoomOutRight;
2865 | }
2866 | 
2867 | @-webkit-keyframes zoomOutUp {
2868 |   40% {
2869 |     opacity: 1;
2870 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2871 |             transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2872 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2873 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2874 |   }
2875 | 
2876 |   100% {
2877 |     opacity: 0;
2878 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2879 |             transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2880 |     -webkit-transform-origin: center bottom;
2881 |             transform-origin: center bottom;
2882 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2883 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884 |   }
2885 | }
2886 | 
2887 | @keyframes zoomOutUp {
2888 |   40% {
2889 |     opacity: 1;
2890 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2891 |             transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2892 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2893 |             animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2894 |   }
2895 | 
2896 |   100% {
2897 |     opacity: 0;
2898 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2899 |             transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
2900 |     -webkit-transform-origin: center bottom;
2901 |             transform-origin: center bottom;
2902 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2903 |             animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2904 |   }
2905 | }
2906 | 
2907 | .zoomOutUp {
2908 |   -webkit-animation-name: zoomOutUp;
2909 |           animation-name: zoomOutUp;
2910 | }
2911 | 
2912 | @-webkit-keyframes slideInDown {
2913 |   0% {
2914 |     -webkit-transform: translateY(-100%);
2915 |             transform: translateY(-100%);
2916 |     visibility: visible;
2917 |   }
2918 | 
2919 |   100% {
2920 |     -webkit-transform: translateY(0);
2921 |             transform: translateY(0);
2922 |   }
2923 | }
2924 | 
2925 | @keyframes slideInDown {
2926 |   0% {
2927 |     -webkit-transform: translateY(-100%);
2928 |             transform: translateY(-100%);
2929 |     visibility: visible;
2930 |   }
2931 | 
2932 |   100% {
2933 |     -webkit-transform: translateY(0);
2934 |             transform: translateY(0);
2935 |   }
2936 | }
2937 | 
2938 | .slideInDown {
2939 |   -webkit-animation-name: slideInDown;
2940 |           animation-name: slideInDown;
2941 | }
2942 | 
2943 | @-webkit-keyframes slideInLeft {
2944 |   0% {
2945 |     -webkit-transform: translateX(-100%);
2946 |             transform: translateX(-100%);
2947 |     visibility: visible;
2948 |   }
2949 | 
2950 |   100% {
2951 |     -webkit-transform: translateX(0);
2952 |             transform: translateX(0);
2953 |   }
2954 | }
2955 | 
2956 | @keyframes slideInLeft {
2957 |   0% {
2958 |     -webkit-transform: translateX(-100%);
2959 |             transform: translateX(-100%);
2960 |     visibility: visible;
2961 |   }
2962 | 
2963 |   100% {
2964 |     -webkit-transform: translateX(0);
2965 |             transform: translateX(0);
2966 |   }
2967 | }
2968 | 
2969 | .slideInLeft {
2970 |   -webkit-animation-name: slideInLeft;
2971 |           animation-name: slideInLeft;
2972 | }
2973 | 
2974 | @-webkit-keyframes slideInRight {
2975 |   0% {
2976 |     -webkit-transform: translateX(100%);
2977 |             transform: translateX(100%);
2978 |     visibility: visible;
2979 |   }
2980 | 
2981 |   100% {
2982 |     -webkit-transform: translateX(0);
2983 |             transform: translateX(0);
2984 |   }
2985 | }
2986 | 
2987 | @keyframes slideInRight {
2988 |   0% {
2989 |     -webkit-transform: translateX(100%);
2990 |             transform: translateX(100%);
2991 |     visibility: visible;
2992 |   }
2993 | 
2994 |   100% {
2995 |     -webkit-transform: translateX(0);
2996 |             transform: translateX(0);
2997 |   }
2998 | }
2999 | 
3000 | .slideInRight {
3001 |   -webkit-animation-name: slideInRight;
3002 |           animation-name: slideInRight;
3003 | }
3004 | 
3005 | @-webkit-keyframes slideInUp {
3006 |   0% {
3007 |     -webkit-transform: translateY(100%);
3008 |             transform: translateY(100%);
3009 |     visibility: visible;
3010 |   }
3011 | 
3012 |   100% {
3013 |     -webkit-transform: translateY(0);
3014 |             transform: translateY(0);
3015 |   }
3016 | }
3017 | 
3018 | @keyframes slideInUp {
3019 |   0% {
3020 |     -webkit-transform: translateY(100%);
3021 |             transform: translateY(100%);
3022 |     visibility: visible;
3023 |   }
3024 | 
3025 |   100% {
3026 |     -webkit-transform: translateY(0);
3027 |             transform: translateY(0);
3028 |   }
3029 | }
3030 | 
3031 | .slideInUp {
3032 |   -webkit-animation-name: slideInUp;
3033 |           animation-name: slideInUp;
3034 | }
3035 | 
3036 | @-webkit-keyframes slideOutDown {
3037 |   0% {
3038 |     -webkit-transform: translateY(0);
3039 |             transform: translateY(0);
3040 |   }
3041 | 
3042 |   100% {
3043 |     visibility: hidden;
3044 |     -webkit-transform: translateY(100%);
3045 |             transform: translateY(100%);
3046 |   }
3047 | }
3048 | 
3049 | @keyframes slideOutDown {
3050 |   0% {
3051 |     -webkit-transform: translateY(0);
3052 |             transform: translateY(0);
3053 |   }
3054 | 
3055 |   100% {
3056 |     visibility: hidden;
3057 |     -webkit-transform: translateY(100%);
3058 |             transform: translateY(100%);
3059 |   }
3060 | }
3061 | 
3062 | .slideOutDown {
3063 |   -webkit-animation-name: slideOutDown;
3064 |           animation-name: slideOutDown;
3065 | }
3066 | 
3067 | @-webkit-keyframes slideOutLeft {
3068 |   0% {
3069 |     -webkit-transform: translateX(0);
3070 |             transform: translateX(0);
3071 |   }
3072 | 
3073 |   100% {
3074 |     visibility: hidden;
3075 |     -webkit-transform: translateX(-100%);
3076 |             transform: translateX(-100%);
3077 |   }
3078 | }
3079 | 
3080 | @keyframes slideOutLeft {
3081 |   0% {
3082 |     -webkit-transform: translateX(0);
3083 |             transform: translateX(0);
3084 |   }
3085 | 
3086 |   100% {
3087 |     visibility: hidden;
3088 |     -webkit-transform: translateX(-100%);
3089 |             transform: translateX(-100%);
3090 |   }
3091 | }
3092 | 
3093 | .slideOutLeft {
3094 |   -webkit-animation-name: slideOutLeft;
3095 |           animation-name: slideOutLeft;
3096 | }
3097 | 
3098 | @-webkit-keyframes slideOutRight {
3099 |   0% {
3100 |     -webkit-transform: translateX(0);
3101 |             transform: translateX(0);
3102 |   }
3103 | 
3104 |   100% {
3105 |     visibility: hidden;
3106 |     -webkit-transform: translateX(100%);
3107 |             transform: translateX(100%);
3108 |   }
3109 | }
3110 | 
3111 | @keyframes slideOutRight {
3112 |   0% {
3113 |     -webkit-transform: translateX(0);
3114 |             transform: translateX(0);
3115 |   }
3116 | 
3117 |   100% {
3118 |     visibility: hidden;
3119 |     -webkit-transform: translateX(100%);
3120 |             transform: translateX(100%);
3121 |   }
3122 | }
3123 | 
3124 | .slideOutRight {
3125 |   -webkit-animation-name: slideOutRight;
3126 |           animation-name: slideOutRight;
3127 | }
3128 | 
3129 | @-webkit-keyframes slideOutUp {
3130 |   0% {
3131 |     -webkit-transform: translateY(0);
3132 |             transform: translateY(0);
3133 |   }
3134 | 
3135 |   100% {
3136 |     visibility: hidden;
3137 |     -webkit-transform: translateY(-100%);
3138 |             transform: translateY(-100%);
3139 |   }
3140 | }
3141 | 
3142 | @keyframes slideOutUp {
3143 |   0% {
3144 |     -webkit-transform: translateY(0);
3145 |             transform: translateY(0);
3146 |   }
3147 | 
3148 |   100% {
3149 |     visibility: hidden;
3150 |     -webkit-transform: translateY(-100%);
3151 |             transform: translateY(-100%);
3152 |   }
3153 | }
3154 | 
3155 | .slideOutUp {
3156 |   -webkit-animation-name: slideOutUp;
3157 |           animation-name: slideOutUp;
3158 | }
3159 | 


--------------------------------------------------------------------------------
/css/images/fjords.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/css/images/fjords.jpg


--------------------------------------------------------------------------------
/css/images/puppy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/css/images/puppy.jpg


--------------------------------------------------------------------------------
/css/images/ships.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/subtle-animations/28088ad3341269b9682060a62b1d5b7154b040b1/css/images/ships.jpg


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fff;
 3 |   font-family: Lato, Arial, sans-serif;
 4 | }
 5 | 
 6 | /* Fixed Header */
 7 | nav.fixed {
 8 |   position: fixed;
 9 |   top: 0;
10 |   left: 0;
11 |   right: 0;
12 |   color: #fff;
13 |   font-size: 20px;
14 |   font-weight: bold;
15 |   text-align: center;
16 | }
17 | 
18 | .midnightHeader.white { color: #fff; }
19 | .midnightHeader.gray { color: #999; }
20 | .midnightHeader.pink { color: #ffc0cb; }
21 | 
22 | nav.fixed .container {
23 |   position: relative;
24 | }
25 | 
26 | .container {
27 |   max-width: 1100px;
28 |   margin: 0 auto;
29 |   padding: 20px;
30 | }
31 | 
32 | 
33 | 
34 | /* There are our main "sections", which are huge images with some text */
35 | section {
36 |   min-height: 100vh;
37 |   background-position: 50% 50%;
38 |   background-size: cover;
39 |   display: flex;
40 |   align-items: center;
41 |   text-align: center;
42 | }
43 | article {
44 |   display: block;
45 |   margin: 0px auto;
46 | }
47 | h1 {
48 |   font-size: 50px;
49 | }
50 | p {
51 |   font-size: 26px;
52 | }
53 | a {
54 |   color: inherit;
55 |   text-decoration: none;
56 |   border-bottom: 1px solid rgba(255,255,255,0.5);
57 | }
58 | a:hover {
59 |   border-bottom-color: rgba(255,255,255,1.0);
60 | }
61 | 
62 | section.fjords {
63 |   background-image: url(images/fjords.jpg);
64 |   color: #fff;
65 | }
66 | section.ships {
67 |   background-image: url(images/ships.jpg);
68 |   background-position: 50% 100%;
69 |   color: #999;
70 | }
71 | section.puppy {
72 |   background-image: url(images/puppy.jpg);
73 |   color: pink;
74 | }
75 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 | 
 6 |   <title>Adding Subtle UI Details with Midnight.js, Wow.js and Animate.css</title>
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
 9 | 
10 |   <link href="http://fonts.googleapis.com/css?family=Lato:400,400bold" rel="stylesheet" type="text/css" />
11 | 
12 |   <link rel="stylesheet" href="css/normalize.css" />
13 | 
14 |   <link rel="stylesheet" href="css/animate.css" />
15 |   <link rel="stylesheet" href="css/styles.css" />
16 |   
17 | </head>
18 | <body>
19 | 
20 | 
21 |   <!-- This is our fixed header, which will be enhanced with Midnight.js -->
22 |   <nav class="fixed">
23 |     <div class="midnightHeader default">
24 |       <div class="container">
25 |         <span class="logo">A How To Guide</span>
26 |       </div>
27 |     </div>
28 |     <div class="midnightHeader gray">
29 |       <div class="container">
30 |         <span class="logo">Shhhhhhhhh</span>
31 |       </div>
32 |     </div>
33 |     <div class="midnightHeader pink">
34 |       <div class="container">
35 |         <span class="logo">❤❤❤ OMG PUPPIES ❤❤❤</span>
36 |       </div>
37 |     </div>
38 |   </nav>
39 | 
40 | 
41 |   <!-- These are our landing page's sections -->
42 |   <section class="fjords" data-midnight="white">
43 |     <article>
44 |       <h1 class="wow fadeInUp">Adding Subtle UI Details</h1>
45 |       <p class="wow fadeInUp" data-wow-delay="0.5s">Using Midnight.js, Wow.js and Animate.css</p>
46 |       <p class="wow fadeInUp" data-wow-delay="1.0s"><a href="https://github.com/Aerolab/subtle-animations" target="_blank">Learn how to do this on Github &gt;</a></p>
47 |     </article>
48 |   </section>
49 | 
50 | 
51 |   <section class="ships" data-midnight="gray">
52 |     <article>
53 |       <h1 class="wow fadeIn" data-wow-duration="1.5s">Be quiet</h1>
54 |       <p class="wow fadeIn" data-wow-delay="0.5s" data-wow-duration="1.5s">I'm hunting wabbits</p>
55 |     </article>
56 |   </section>
57 | 
58 | 
59 |   <section class="puppy" data-midnight="pink">
60 |     <article>
61 |       <h1 class="wow shake" data-wow-iteration="5" data-wow-duration="0.5s">OMG A PUPPY &lt;3</h1>
62 |       <p class="wow fadeIn" data-wow-delay="2.5s">Ok, this one wasn't subtle at all</p>
63 |     </article>
64 |   </section>
65 | 
66 | 
67 |   <script src="js/jquery-1.11.1.min.js"></script>
68 |   <!-- Midnight.js -->
69 |   <script src="js/midnight.jquery.min.js"></script>
70 |   <script>
71 |   $(document).ready(function(){
72 |     $('nav.fixed').midnight();
73 |   });
74 |   </script>
75 | 
76 |   <!-- Wow.js -->
77 |   <script src="js/wow.min.js"></script>
78 |   <script>new WOW().init()</script>
79 | 
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/js/midnight.jquery.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Midnight.js 1.0.3
 3 |  * jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
 4 |  * http://aerolab.github.io/midnight.js/
 5 |  *
 6 |  * Copyright (c) 2014 Aerolab <info@aerolab.co>
 7 |  *
 8 |  * Released under the MIT license
 9 |  * http://aerolab.github.io/midnight.js/LICENSE.txt
10 |  */
11 |  !function(e){e.fn.midnight=function(t){return"object"!=typeof t&&(t={}),this.each(function(){var s={headerClass:"midnightHeader",innerClass:"midnightInner",defaultClass:"default"};e.extend(s,t);var a=window.pageYOffset||document.documentElement.scrollTop,n=e(document).height(),r=e(this),o={},l={top:0,height:r.outerHeight()},d=e("[data-midnight]"),f=[],h=function(){for(var e="transform WebkitTransform MozTransform OTransform msTransform".split(" "),t=0;t<e.length;t++)if(void 0!==document.createElement("div").style[e[t]])return e[t];return!1},m=h();if(0!=d.length){var c=function(){var t=r.find("> ."+s.headerClass),a=0,n=0;return t.length?t.each(function(){var t=e(this),i=t.find("> ."+s.innerClass);i.length?(i.css("bottom","auto"),n=i.outerHeight(),i.css("bottom","0")):(t.css("bottom","auto"),n=t.outerHeight(),t.css("bottom","0")),a=n>a?n:a}):a=n=r.outerHeight(),a},u=function(){l.height=c(),r.css("height",l.height+"px")},g=function(){o["default"]={},d.each(function(){var t=e(this),s=t.data("midnight");"string"==typeof s&&(s=s.trim(),""!==s&&(o[s]={}))});({top:r.css("padding-top"),right:r.css("padding-right"),bottom:r.css("padding-bottom"),left:r.css("padding-left")});r.css({position:"fixed",top:0,left:0,right:0,overflow:"hidden"}),u();var t=r.find("> ."+s.headerClass);t.length?t.filter("."+s.defaultClass).length||t.filter("."+s.headerClass+":first").clone(!0,!0).attr("class",s.headerClass+" "+s.defaultClass):r.wrapInner('<div class="'+s.headerClass+" "+s.defaultClass+'"></div>');var t=r.find("> ."+s.headerClass),a=t.filter("."+s.defaultClass).clone(!0,!0);for(headerClass in o)if("undefined"==typeof o[headerClass].element){var n=t.filter("."+headerClass);o[headerClass].element=n.length?n:a.clone(!0,!0).removeClass(s.defaultClass).addClass(headerClass).appendTo(r);var i={position:"absolute",overflow:"hidden",top:0,left:0,right:0,bottom:0};o[headerClass].element.css(i),m!==!1&&o[headerClass].element.css(m,"translateZ(0)"),o[headerClass].element.find("> ."+s.innerClass).length||o[headerClass].element.wrapInner('<div class="'+s.innerClass+'"></div>'),o[headerClass].inner=o[headerClass].element.find("> ."+s.innerClass),o[headerClass].inner.css(i),m!==!1&&o[headerClass].inner.css(m,"translateZ(0)"),o[headerClass].from="",o[headerClass].progress=0}t.each(function(){var t=e(this),a=!1;for(headerClass in o)t.hasClass(headerClass)&&(a=!0);t.find("> ."+s.innerClass).length||t.wrapInner('<div class="'+s.innerClass+'"></div>'),a||t.hide()})};g();var p=function(){for(n=e(document).height(),f=[],i=0;i<d.length;i++){var t=e(d[i]);f.push({element:t,"class":t.data("midnight"),start:t.offset().top,end:t.offset().top+t.outerHeight()})}};setInterval(p,1e3);var x=function(){a=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,a=Math.max(a,0),a=Math.min(a,n);var e=l.height,t=a+l.top,s=a+l.top+e;for(ix in o)o[ix].from="",o[ix].progress=0;for(ix in f)s>=f[ix].start&&t<=f[ix].end&&(o[f[ix].class].visible=!0,t>=f[ix].start&&s<=f[ix].end?(o[f[ix].class].from="top",o[f[ix].class].progress+=1):s>f[ix].end&&t<f[ix].end?(o[f[ix].class].from="top",o[f[ix].class].progress=1-(s-f[ix].end)/e):s>f[ix].start&&t<f[ix].start&&("top"===o[f[ix].class].from?o[f[ix].class].progress+=(s-f[ix].start)/e:(o[f[ix].class].from="bottom",o[f[ix].class].progress=(s-f[ix].start)/e)))},C=function(){var e=0,t="";for(ix in o)""!==!o[ix].from&&(e+=o[ix].progress,t=ix);1>e&&(""===o[s.defaultClass].from?(o[s.defaultClass].from="top"===o[t].from?"bottom":"top",o[s.defaultClass].progress=1-e):o[s.defaultClass].progress+=1-e);for(ix in o)if(""!==!o[ix].from){var a=100*(1-o[ix].progress);"top"===o[ix].from?m!==!1?(o[ix].element[0].style[m]="translateY(-"+a+"%) translateZ(0)",o[ix].inner[0].style[m]="translateY(+"+a+"%) translateZ(0)"):(o[ix].element[0].style.top="-"+a+"%",o[ix].inner[0].style.top="+"+a+"%"):m!==!1?(o[ix].element[0].style[m]="translateY(+"+a+"%) translateZ(0)",o[ix].inner[0].style[m]="translateY(-"+a+"%) translateZ(0)"):(o[ix].element.style.top="+"+a+"%",o[ix].inner.style.top="-"+a+"%")}};e(window).resize(function(){p(),u(),x(),C()}).trigger("resize"),requestAnimationFrame=window.requestAnimationFrame||function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}();var v=function(){requestAnimationFrame(v),x(),C()};v()}})}}(jQuery);


--------------------------------------------------------------------------------
/js/wow.min.js:
--------------------------------------------------------------------------------
1 | /*! WOW - v1.0.2 - 2014-09-24
2 | * Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else{for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)}return this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f>e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b>a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[""+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f>b;b++)e=g[b],h.push(a[""+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h>g;g++)f=i[g],c=c||e.getPropertyCSSValue("-"+f+"-"+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);


--------------------------------------------------------------------------------