colorgy_style 0.0.0.1 → 0.0.0.2

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