active_frontend 10.2.10 → 10.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/lib/active_frontend/version.rb +1 -1
  3. data/lib/generators/active_frontend/templates/install.scss +3 -1
  4. data/vendor/assets/javascripts/_swoggle.js +1 -1
  5. data/vendor/assets/stylesheets/_ad.scss +41 -62
  6. data/vendor/assets/stylesheets/_alert.scss +74 -27
  7. data/vendor/assets/stylesheets/_animation.scss +632 -560
  8. data/vendor/assets/stylesheets/_aside.scss +14 -11
  9. data/vendor/assets/stylesheets/_breadcrumb.scss +3 -3
  10. data/vendor/assets/stylesheets/_button.scss +41 -30
  11. data/vendor/assets/stylesheets/_canvas.scss +2 -1
  12. data/vendor/assets/stylesheets/_carousel.scss +7 -6
  13. data/vendor/assets/stylesheets/_code.scss +12 -14
  14. data/vendor/assets/stylesheets/_collapse.scss +2 -1
  15. data/vendor/assets/stylesheets/_color.scss +53 -21
  16. data/vendor/assets/stylesheets/_colorpicker.scss +4 -3
  17. data/vendor/assets/stylesheets/_datepicker.scss +10 -9
  18. data/vendor/assets/stylesheets/_dropdown.scss +12 -11
  19. data/vendor/assets/stylesheets/_footer.scss +7 -7
  20. data/vendor/assets/stylesheets/_form.scss +33 -10
  21. data/vendor/assets/stylesheets/_grid.scss +64 -215
  22. data/vendor/assets/stylesheets/_header.scss +4 -4
  23. data/vendor/assets/stylesheets/_label_and_badge.scss +69 -165
  24. data/vendor/assets/stylesheets/_link.scss +2 -1
  25. data/vendor/assets/stylesheets/_list.scss +19 -7
  26. data/vendor/assets/stylesheets/_loader.scss +29 -9
  27. data/vendor/assets/stylesheets/_map.scss +13 -1
  28. data/vendor/assets/stylesheets/_missive.scss +7 -7
  29. data/vendor/assets/stylesheets/_modal.scss +6 -3
  30. data/vendor/assets/stylesheets/_nav_and_tab.scss +11 -11
  31. data/vendor/assets/stylesheets/_navbar.scss +5 -5
  32. data/vendor/assets/stylesheets/_pagination.scss +1 -1
  33. data/vendor/assets/stylesheets/_panel.scss +10 -7
  34. data/vendor/assets/stylesheets/_placeholder.scss +4 -4
  35. data/vendor/assets/stylesheets/_popover.scss +7 -7
  36. data/vendor/assets/stylesheets/_progress.scss +79 -17
  37. data/vendor/assets/stylesheets/_reset.scss +7 -4
  38. data/vendor/assets/stylesheets/_sidebar.scss +12 -10
  39. data/vendor/assets/stylesheets/_slider.scss +5 -5
  40. data/vendor/assets/stylesheets/_spinner.scss +297 -152
  41. data/vendor/assets/stylesheets/_stripe.scss +30 -0
  42. data/vendor/assets/stylesheets/_swoggle.scss +88 -93
  43. data/vendor/assets/stylesheets/_table.scss +10 -18
  44. data/vendor/assets/stylesheets/_timepicker.scss +6 -5
  45. data/vendor/assets/stylesheets/_toolbar.scss +11 -11
  46. data/vendor/assets/stylesheets/_tooltip.scss +1 -1
  47. data/vendor/assets/stylesheets/_transition.scss +2 -1
  48. data/vendor/assets/stylesheets/_trunk.scss +14 -12
  49. data/vendor/assets/stylesheets/_typeahead.scss +2 -1
  50. data/vendor/assets/stylesheets/_typography.scss +60 -27
  51. data/vendor/assets/stylesheets/active_frontend.scss +3 -1
  52. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: e517b2039275adbdc24e17a1a8e1e45773232ef2
4
- data.tar.gz: c197f8f8b5062c1fd5ecb63febe07ed963b8cf2b
3
+ metadata.gz: a11ea05ca5fa87f30209cb062593156594f095fc
4
+ data.tar.gz: 85e6ce39ac07ddf5bf12e62087f2d978da32682a
5
5
  SHA512:
6
- metadata.gz: d6c34036f8c29aec8d8d18feaf8c16d4d6c4461d392d1c26a3af662f8919b4b8d3eee9337b4a91134c7dfc1e4e58243a3ab3ef0cd3f8a43eb794bef38153d3ff
7
- data.tar.gz: cdc06e24178f87039b4849500bd8d4f6983ed40f17cfea9f8b92ff13b78cc24f6281e74a63af96a3ebaa6024d8cb3ca2d8cbdc9d9139a5ebf99d2e185c5d363b
6
+ metadata.gz: 62219c9a772a00bb73bc0dd393c77815e36d6dae377f1ebe15ca9d841c5c7af1d7fd8630603365d6f4677a6c4f8653192a02bf4f6beff4194664bcb6b7a78a08
7
+ data.tar.gz: 8c712d0ede556211b2423d5cf9d086657e80b36a2c1d6129858365dfc8574d736e4eb2030cceb8c6a7eca9801b4dbe05d23808b07e3458b4d85d917e2d6c677e
@@ -1,3 +1,3 @@
1
1
  module ActiveFrontend
2
- VERSION = "10.2.10"
2
+ VERSION = "10.3.0"
3
3
  end
@@ -10,8 +10,9 @@
10
10
 
11
11
  /* # Required Variables
12
12
  ================================================== */
13
- $color-primary: $color-blue;
13
+ $color-primary: $color-blue;
14
14
  $color-secondary: $color-green;
15
+ $color-tertiary: $color-red;
15
16
 
16
17
  /* # Optional Imports
17
18
  ================================================== */
@@ -54,6 +55,7 @@ $color-secondary: $color-green;
54
55
  @import 'sidebar';
55
56
  @import 'slider';
56
57
  @import 'spinner';
58
+ @import 'stripe';
57
59
  @import 'swoggle';
58
60
  @import 'table';
59
61
  @import 'timepicker';
@@ -11,7 +11,7 @@
11
11
  animate: true,
12
12
  disabled: false,
13
13
  readonly: false,
14
- onColor: null,
14
+ onColor: "green",
15
15
  offColor: null,
16
16
  onText: "",
17
17
  offText: "",
@@ -1,77 +1,56 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
+ # Mixins
3
4
  # Ad
5
+ # Sizes
4
6
  # Media Queries */
5
7
 
8
+ /* # Mixins
9
+ ================================================== */
10
+ @mixin dimensions($height, $width) {
11
+ height: $height;
12
+ width: $width;
13
+ }
14
+
6
15
  /* # Ad
7
16
  ================================================== */
8
17
  .ad {
9
- background: $color-haze-light;
10
- border: 1px solid $color-haze-dark;
18
+ background: $color-white;
19
+ border: 1px solid $color-haze;
11
20
  box-sizing: border-box;
12
- height: 220px;
13
- width: 220px;
21
+ display: block !important;
22
+ visibility: visible !important;
23
+ @include dimensions(220px, 220px);
14
24
  }
15
25
  .ad-center { margin: 0 auto; }
16
- .ad-large-rectangle {
17
- height: 280px;
18
- width: 336px;
19
- }
20
- .ad-medium-rectangle {
21
- height: 250px;
22
- width: 300px;
23
- }
24
- .ad-small-rectangle {
25
- height: 150px;
26
- width: 180px;
27
- }
28
- .ad-square {
29
- height: 250px;
30
- width: 250px;
31
- }
32
- .ad-small-square {
33
- height: 200px;
34
- width: 200px;
35
- }
36
- .ad-button {
37
- height: 125px;
38
- width: 125px;
39
- }
40
- .ad-large-leaderboard {
41
- height: 90px;
42
- width: 970px;
43
- }
44
- .ad-leaderboard {
45
- height: 90px;
46
- width: 728px;
47
- }
48
- .ad-banner {
49
- height: 60px;
50
- width: 468px;
51
- }
52
- .ad-half-banner {
53
- height: 60px;
54
- width: 234px;
55
- }
56
- .ad-mobile-banner {
57
- height: 50px;
58
- width: 320px;
59
- }
60
- .ad-vertical-banner {
61
- height: 240px;
62
- width: 120px;
63
- }
64
- .ad-large-skyscrapper {
65
- height: 600px;
66
- width: 300px;
67
- }
68
- .ad-wide-skyscrapper {
69
- height: 600px;
70
- width: 160px;
26
+
27
+ /* # Sizes
28
+ ================================================== */
29
+ .ad-banner { @include dimensions(60px, 468px); }
30
+ .ad-half-banner { @include dimensions(60px, 234px); }
31
+ .ad-mobile-banner { @include dimensions(50px, 320px); }
32
+ .ad-vertical-banner { @include dimensions(240px, 120px); }
33
+ .ad-button { @include dimensions(125px, 125px); }
34
+ .ad-leaderboard { @include dimensions(90px, 728px); }
35
+ .ad-large-leaderboard { @include dimensions(90px, 970px); }
36
+ .ad-large-rectangle { @include dimensions(280px, 336px); }
37
+ .ad-medium-rectangle { @include dimensions(250px, 300px); }
38
+ .ad-small-rectangle { @include dimensions(150px, 180px); }
39
+ .ad-skyscrapper { @include dimensions(600px, 120px); }
40
+ .ad-large-skyscrapper { @include dimensions(600px, 300px); }
41
+ .ad-wide-skyscrapper { @include dimensions(600px, 160px); }
42
+ .ad-square { @include dimensions(250px, 250px); }
43
+ .ad-small-square { @include dimensions(200px, 200px); }
44
+
45
+ /* # Colors
46
+ ================================================== */
47
+ .ad-dark {
48
+ background: $color-black;
49
+ border-color: $color-dark-black;
71
50
  }
72
- .ad-skyscrapper {
73
- height: 600px;
74
- width: 120px;
51
+ .ad-light {
52
+ background: $color-light-haze;
53
+ border-color: $color-dark-haze;
75
54
  }
76
55
 
77
56
  /* # Media Queries
@@ -1,10 +1,60 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
+ # Variables
3
4
  # Alert
4
5
  # Application
5
6
  # Colors
6
7
  # Media Queries */
7
8
 
9
+ /* # Variables
10
+ ================================================== */
11
+ $onblack-colors: (
12
+ dark-yellow: $color-dark-yellow,
13
+ yellow: $color-yellow,
14
+ light-yellow: $color-light-yellow
15
+ );
16
+ $ongray-colors: (
17
+ dark-haze: $color-dark-haze,
18
+ haze: $color-haze,
19
+ light-haze: $color-light-haze,
20
+ white: $color-white
21
+ );
22
+ $onwhite-colors: (
23
+ dark-black: $color-dark-black,
24
+ black: $color-black,
25
+ light-black: $color-light-black,
26
+ dark-gray: $color-dark-gray,
27
+ gray: $color-gray,
28
+ light-gray: $color-light-gray,
29
+ dark-lime: $color-dark-lime,
30
+ lime: $color-lime,
31
+ light-lime: $color-light-lime,
32
+ dark-green: $color-dark-green,
33
+ green: $color-green,
34
+ light-green: $color-light-green,
35
+ dark-teal: $color-dark-teal,
36
+ teal: $color-teal,
37
+ light-teal: $color-light-teal,
38
+ dark-blue: $color-dark-blue,
39
+ blue: $color-blue,
40
+ light-blue: $color-light-blue,
41
+ dark-indigo: $color-dark-indigo,
42
+ indigo: $color-indigo,
43
+ light-indigo: $color-light-indigo,
44
+ dark-purple: $color-dark-purple,
45
+ purple: $color-purple,
46
+ light-purple: $color-light-purple,
47
+ dark-pink: $color-dark-pink,
48
+ pink: $color-pink,
49
+ light-pink: $color-light-pink,
50
+ dark-red: $color-dark-red,
51
+ red: $color-red,
52
+ light-red: $color-light-red,
53
+ dark-orange: $color-dark-orange,
54
+ orange: $color-orange,
55
+ light-orange: $color-light-orange
56
+ );
57
+
8
58
  /* # Alert
9
59
  ================================================== */
10
60
  .alert-fixed {
@@ -46,35 +96,32 @@
46
96
 
47
97
  /* # Colors
48
98
  ================================================== */
49
- .alert-black { background: $color-black; }
50
- .alert-black-dark { background: $color-black-dark; }
51
- .alert-black-light { background: $color-black-light; }
52
- .alert-blue { background: $color-blue; }
53
- .alert-gray-dark { background: $color-gray-dark; }
54
- .alert-gray-light { background: $color-gray-light; }
55
- .alert-green,
56
- .alert-success { background: $color-green; }
57
- .alert-indigo { background: $color-indigo; }
58
- .alert-lime { background: $color-lime; }
59
- .alert-orange,
60
- .alert-warning { background: $color-orange; }
61
- .alert-purple { background: $color-purple; }
62
- .alert-pink { background: $color-pink; }
63
- .alert-red,
64
- .alert-error,
65
- .alert-alert { background: $color-red; }
66
- .alert-teal { background: $color-teal; }
67
- .alert-yellow { background: $color-yellow; }
68
- .alert-white {
69
- background: $color-white;
70
- border-color: $color-haze;
71
- color: $color-gray;
99
+ @each $name, $color in $onblack-colors {
100
+ .alert-#{$name} {
101
+ background: $color;
102
+ color: $color-black;
103
+ }
104
+ .alert-#{$name} > a {
105
+ border-bottom-color: $color-black;
106
+ color: $color-black;
107
+ }
108
+ .alert-#{$name} .alert-close { color: $color-black !important; }
109
+ }
110
+ @each $name, $color in $ongray-colors {
111
+ .alert-#{$name} {
112
+ background: $color;
113
+ border-color: rgba(0,0,0,0.1);
114
+ color: $color-gray;
115
+ }
116
+ .alert-#{$name} > a {
117
+ border-bottom-color: $color-black;
118
+ color: $color-gray;
119
+ }
120
+ .alert-#{$name} .alert-close { color: $color-gray !important; }
72
121
  }
73
- .alert-white > a {
74
- border-bottom-color: $color-gray;
75
- color: $color-gray;
122
+ @each $name, $color in $onwhite-colors {
123
+ .alert-#{$name} { background: $color; }
76
124
  }
77
- .alert-white .alert-close { color: $color-gray !important; }
78
125
 
79
126
  /* # Media Queries
80
127
  ================================================== */
@@ -1,25 +1,25 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
- # Animation
3
+ # Animate
4
+ # Animations
4
5
  # Delay
5
6
  # Duration */
6
7
 
7
- /* #Animation
8
+ /* # Animate
8
9
  ================================================== */
9
10
  .animated {
10
11
  -webkit-animation-duration: 1s;
11
- animation-duration: 1s;
12
+ -ms-animation-duration: 1s;
13
+ animation-duration: 1s;
12
14
  -webkit-animation-fill-mode: both;
13
- animation-fill-mode: both;
14
- -webkit-perspective: 1000;
15
- perspective: 1000;
15
+ -ms-animation-fill-mode: both;
16
+ animation-fill-mode: both;
16
17
  position: relative;
17
18
  }
18
- .animated.hinge {
19
- -webkit-animation-duration: 2s;
20
- animation-duration: 2s;
21
- }
22
- @-webkit-keyframes bounce {
19
+
20
+ /* # Animations
21
+ ================================================== */
22
+ @-webkit-keyframes animated-bounce {
23
23
  0%, 20%, 50%, 80%, 100% {
24
24
  -webkit-transform: translateY(0);
25
25
  transform: translateY(0);
@@ -33,7 +33,7 @@
33
33
  transform: translateY(-15px);
34
34
  }
35
35
  }
36
- @keyframes bounce {
36
+ @keyframes animated-bounce {
37
37
  0%, 20%, 50%, 80%, 100% {
38
38
  -webkit-transform: translateY(0);
39
39
  -ms-transform: translateY(0);
@@ -50,23 +50,25 @@
50
50
  transform: translateY(-15px);
51
51
  }
52
52
  }
53
- .bounce {
54
- -webkit-animation-name: bounce;
55
- animation-name: bounce;
53
+ .animated-bounce {
54
+ -webkit-animation-name: animated-bounce;
55
+ -ms-animation-name: animated-bounce;
56
+ animation-name: animated-bounce;
56
57
  }
57
- @-webkit-keyframes flash {
58
+ @-webkit-keyframes animated-flash {
58
59
  0%, 50%, 100% { opacity: 1; }
59
60
  25%, 75% { opacity: 0; }
60
61
  }
61
- @keyframes flash {
62
+ @keyframes animated-flash {
62
63
  0%, 50%, 100% { opacity: 1; }
63
64
  25%, 75% { opacity: 0; }
64
65
  }
65
- .flash {
66
- -webkit-animation-name: flash;
67
- animation-name: flash;
66
+ .animated-flash {
67
+ -webkit-animation-name: animated-flash;
68
+ -ms-animation-name: animated-flash;
69
+ animation-name: animated-flash;
68
70
  }
69
- @-webkit-keyframes pulse {
71
+ @-webkit-keyframes animated-pulse {
70
72
  0% {
71
73
  -webkit-transform: scale(1);
72
74
  transform: scale(1);
@@ -80,7 +82,7 @@
80
82
  transform: scale(1);
81
83
  }
82
84
  }
83
- @keyframes pulse {
85
+ @keyframes animated-pulse {
84
86
  0% {
85
87
  -webkit-transform: scale(1);
86
88
  -ms-transform: scale(1);
@@ -97,11 +99,12 @@
97
99
  transform: scale(1);
98
100
  }
99
101
  }
100
- .pulse {
101
- -webkit-animation-name: pulse;
102
- animation-name: pulse;
102
+ .animated-pulse {
103
+ -webkit-animation-name: animated-pulse;
104
+ -ms-animation-name: animated-pulse;
105
+ animation-name: animated-pulse;
103
106
  }
104
- @-webkit-keyframes shake {
107
+ @-webkit-keyframes animated-shake {
105
108
  0%, 100% {
106
109
  -webkit-transform: translateX(0);
107
110
  transform: translateX(0);
@@ -115,7 +118,7 @@
115
118
  transform: translateX(10px);
116
119
  }
117
120
  }
118
- @keyframes shake {
121
+ @keyframes animated-shake {
119
122
  0%, 100% {
120
123
  -webkit-transform: translateX(0);
121
124
  -ms-transform: translateX(0);
@@ -132,11 +135,12 @@
132
135
  transform: translateX(10px);
133
136
  }
134
137
  }
135
- .shake {
136
- -webkit-animation-name: shake;
137
- animation-name: shake;
138
+ .animated-shake {
139
+ -webkit-animation-name: animated-shake;
140
+ -ms-animation-name: animated-shake;
141
+ animation-name: animated-shake;
138
142
  }
139
- @-webkit-keyframes swing {
143
+ @-webkit-keyframes animated-swing {
140
144
  20% {
141
145
  -webkit-transform: rotate(15deg);
142
146
  transform: rotate(15deg);
@@ -158,7 +162,7 @@
158
162
  transform: rotate(0deg);
159
163
  }
160
164
  }
161
- @keyframes swing {
165
+ @keyframes animated-swing {
162
166
  20% {
163
167
  -webkit-transform: rotate(15deg);
164
168
  -ms-transform: rotate(15deg);
@@ -185,14 +189,15 @@
185
189
  transform: rotate(0deg);
186
190
  }
187
191
  }
188
- .swing {
192
+ .animated-swing {
193
+ -webkit-animation-name: animated-swing;
194
+ -ms-animation-name: animated-swing;
195
+ animation-name: animated-swing;
189
196
  -webkit-transform-origin: top center;
190
- -ms-transform-origin: top center;
191
- transform-origin: top center;
192
- -webkit-animation-name: swing;
193
- animation-name: swing;
197
+ -ms-transform-origin: top center;
198
+ transform-origin: top center;
194
199
  }
195
- @-webkit-keyframes tada {
200
+ @-webkit-keyframes animated-tada {
196
201
  0% {
197
202
  -webkit-transform: scale(1);
198
203
  transform: scale(1);
@@ -214,7 +219,7 @@
214
219
  transform: scale(1) rotate(0);
215
220
  }
216
221
  }
217
- @keyframes tada {
222
+ @keyframes animated-tada {
218
223
  0% {
219
224
  -webkit-transform: scale(1);
220
225
  -ms-transform: scale(1);
@@ -241,11 +246,12 @@
241
246
  transform: scale(1) rotate(0);
242
247
  }
243
248
  }
244
- .tada {
245
- -webkit-animation-name: tada;
246
- animation-name: tada;
249
+ .animated-tada {
250
+ -webkit-animation-name: animated-tada;
251
+ -ms-animation-name: animated-tada;
252
+ animation-name: animated-tada;
247
253
  }
248
- @-webkit-keyframes wobble {
254
+ @-webkit-keyframes animated-wobble {
249
255
  0% {
250
256
  -webkit-transform: translateX(0%);
251
257
  transform: translateX(0%);
@@ -275,7 +281,7 @@
275
281
  transform: translateX(0%);
276
282
  }
277
283
  }
278
- @keyframes wobble {
284
+ @keyframes animated-wobble {
279
285
  0% {
280
286
  -webkit-transform: translateX(0%);
281
287
  -ms-transform: translateX(0%);
@@ -317,11 +323,12 @@
317
323
  transform: translateX(0%);
318
324
  }
319
325
  }
320
- .wobble {
321
- -webkit-animation-name: wobble;
322
- animation-name: wobble;
326
+ .animated-wobble {
327
+ -webkit-animation-name: animated-wobble;
328
+ -ms-animation-name: animated-wobble;
329
+ animation-name: animated-wobble;
323
330
  }
324
- @-webkit-keyframes bounceIn {
331
+ @-webkit-keyframes animated-bounce-in {
325
332
  0% {
326
333
  opacity: 0;
327
334
  -webkit-transform: scale(.3);
@@ -341,7 +348,7 @@
341
348
  transform: scale(1);
342
349
  }
343
350
  }
344
- @keyframes bounceIn {
351
+ @keyframes animated-bounce-in {
345
352
  0% {
346
353
  opacity: 0;
347
354
  -webkit-transform: scale(.3);
@@ -365,11 +372,12 @@
365
372
  transform: scale(1);
366
373
  }
367
374
  }
368
- .bounceIn {
369
- -webkit-animation-name: bounceIn;
370
- animation-name: bounceIn;
375
+ .animated-bounce-in {
376
+ -webkit-animation-name: animated-bounce-in;
377
+ -ms-animation-name: animated-bounce-in;
378
+ animation-name: animated-bounce-in;
371
379
  }
372
- @-webkit-keyframes bounceInDown {
380
+ @-webkit-keyframes animated-bounce-in-down {
373
381
  0% {
374
382
  opacity: 0;
375
383
  -webkit-transform: translateY(-2000px);
@@ -389,7 +397,7 @@
389
397
  transform: translateY(0);
390
398
  }
391
399
  }
392
- @keyframes bounceInDown {
400
+ @keyframes animated-bounce-in-down {
393
401
  0% {
394
402
  opacity: 0;
395
403
  -webkit-transform: translateY(-2000px);
@@ -413,11 +421,12 @@
413
421
  transform: translateY(0);
414
422
  }
415
423
  }
416
- .bounceInDown {
417
- -webkit-animation-name: bounceInDown;
418
- animation-name: bounceInDown;
424
+ .animated-bounce-in-down {
425
+ -webkit-animation-name: animated-bounce-in-down;
426
+ -ms-animation-name: animated-bounce-in-down;
427
+ animation-name: animated-bounce-in-down;
419
428
  }
420
- @-webkit-keyframes bounceInLeft {
429
+ @-webkit-keyframes animated-bounce-in-left {
421
430
  0% {
422
431
  opacity: 0;
423
432
  -webkit-transform: translateX(-2000px);
@@ -437,7 +446,7 @@
437
446
  transform: translateX(0);
438
447
  }
439
448
  }
440
- @keyframes bounceInLeft {
449
+ @keyframes animated-bounce-in-left {
441
450
  0% {
442
451
  opacity: 0;
443
452
  -webkit-transform: translateX(-2000px);
@@ -461,11 +470,12 @@
461
470
  transform: translateX(0);
462
471
  }
463
472
  }
464
- .bounceInLeft {
465
- -webkit-animation-name: bounceInLeft;
466
- animation-name: bounceInLeft;
473
+ .animated-bounce-in-left {
474
+ -webkit-animation-name: animated-bounce-in-left;
475
+ -ms-animation-name: animated-bounce-in-left;
476
+ animation-name: animated-bounce-in-left;
467
477
  }
468
- @-webkit-keyframes bounceInRight {
478
+ @-webkit-keyframes animated-bounce-in-right {
469
479
  0% {
470
480
  opacity: 0;
471
481
  -webkit-transform: translateX(2000px);
@@ -485,7 +495,7 @@
485
495
  transform: translateX(0);
486
496
  }
487
497
  }
488
- @keyframes bounceInRight {
498
+ @keyframes animated-bounce-in-right {
489
499
  0% {
490
500
  opacity: 0;
491
501
  -webkit-transform: translateX(2000px);
@@ -509,11 +519,12 @@
509
519
  transform: translateX(0);
510
520
  }
511
521
  }
512
- .bounceInRight {
513
- -webkit-animation-name: bounceInRight;
514
- animation-name: bounceInRight;
522
+ .animated-bounce-in-right {
523
+ -webkit-animation-name: animated-bounce-in-right;
524
+ -ms-animation-name: animated-bounce-in-right;
525
+ animation-name: animated-bounce-in-right;
515
526
  }
516
- @-webkit-keyframes bounceInUp {
527
+ @-webkit-keyframes animated-bounce-in-up {
517
528
  0% {
518
529
  opacity: 0;
519
530
  -webkit-transform: translateY(2000px);
@@ -533,7 +544,7 @@
533
544
  transform: translateY(0);
534
545
  }
535
546
  }
536
- @keyframes bounceInUp {
547
+ @keyframes animated-bounce-in-up {
537
548
  0% {
538
549
  opacity: 0;
539
550
  -webkit-transform: translateY(2000px);
@@ -557,11 +568,12 @@
557
568
  transform: translateY(0);
558
569
  }
559
570
  }
560
- .bounceInUp {
561
- -webkit-animation-name: bounceInUp;
562
- animation-name: bounceInUp;
571
+ .animated-bounce-in-up {
572
+ -webkit-animation-name: animated-bounce-in-up;
573
+ -ms-animation-name: animated-bounce-in-up;
574
+ animation-name: animated-bounce-in-up;
563
575
  }
564
- @-webkit-keyframes bounceOut {
576
+ @-webkit-keyframes animated-bounce-out {
565
577
  0% {
566
578
  -webkit-transform: scale(1);
567
579
  transform: scale(1);
@@ -581,7 +593,7 @@
581
593
  transform: scale(.3);
582
594
  }
583
595
  }
584
- @keyframes bounceOut {
596
+ @keyframes animated-bounce-out {
585
597
  0% {
586
598
  -webkit-transform: scale(1);
587
599
  -ms-transform: scale(1);
@@ -605,11 +617,12 @@
605
617
  transform: scale(.3);
606
618
  }
607
619
  }
608
- .bounceOut {
609
- -webkit-animation-name: bounceOut;
610
- animation-name: bounceOut;
620
+ .animated-bounce-out {
621
+ -webkit-animation-name: animated-bounce-out;
622
+ -ms-animation-name: animated-bounce-out;
623
+ animation-name: animated-bounce-out;
611
624
  }
612
- @-webkit-keyframes bounceOutDown {
625
+ @-webkit-keyframes animated-bounce-out-down {
613
626
  0% {
614
627
  -webkit-transform: translateY(0);
615
628
  transform: translateY(0);
@@ -625,7 +638,7 @@
625
638
  transform: translateY(2000px);
626
639
  }
627
640
  }
628
- @keyframes bounceOutDown {
641
+ @keyframes animated-bounce-out-down {
629
642
  0% {
630
643
  -webkit-transform: translateY(0);
631
644
  -ms-transform: translateY(0);
@@ -644,11 +657,12 @@
644
657
  transform: translateY(2000px);
645
658
  }
646
659
  }
647
- .bounceOutDown {
648
- -webkit-animation-name: bounceOutDown;
649
- animation-name: bounceOutDown;
660
+ .animated-bounce-out-down {
661
+ -webkit-animation-name: animated-bounce-out-down;
662
+ -ms-animation-name: animated-bounce-out-down;
663
+ animation-name: animated-bounce-out-down;
650
664
  }
651
- @-webkit-keyframes bounceOutLeft {
665
+ @-webkit-keyframes animated-bounce-out-left {
652
666
  0% {
653
667
  -webkit-transform: translateX(0);
654
668
  transform: translateX(0);
@@ -664,7 +678,7 @@
664
678
  transform: translateX(-2000px);
665
679
  }
666
680
  }
667
- @keyframes bounceOutLeft {
681
+ @keyframes animated-bounce-out-left {
668
682
  0% {
669
683
  -webkit-transform: translateX(0);
670
684
  -ms-transform: translateX(0);
@@ -683,11 +697,12 @@
683
697
  transform: translateX(-2000px);
684
698
  }
685
699
  }
686
- .bounceOutLeft {
687
- -webkit-animation-name: bounceOutLeft;
688
- animation-name: bounceOutLeft;
700
+ .animated-bounce-out-left {
701
+ -webkit-animation-name: animated-bounce-out-left;
702
+ -ms-animation-name: animated-bounce-out-left;
703
+ animation-name: animated-bounce-out-left;
689
704
  }
690
- @-webkit-keyframes bounceOutRight {
705
+ @-webkit-keyframes animated-bounce-out-right {
691
706
  0% {
692
707
  -webkit-transform: translateX(0);
693
708
  transform: translateX(0);
@@ -703,7 +718,7 @@
703
718
  transform: translateX(2000px);
704
719
  }
705
720
  }
706
- @keyframes bounceOutRight {
721
+ @keyframes animated-bounce-out-right {
707
722
  0% {
708
723
  -webkit-transform: translateX(0);
709
724
  -ms-transform: translateX(0);
@@ -722,11 +737,12 @@
722
737
  transform: translateX(2000px);
723
738
  }
724
739
  }
725
- .bounceOutRight {
726
- -webkit-animation-name: bounceOutRight;
727
- animation-name: bounceOutRight;
740
+ .animated-bounce-out-right {
741
+ -webkit-animation-name: animated-bounce-out-right;
742
+ -ms-animation-name: animated-bounce-out-right;
743
+ animation-name: animated-bounce-out-right;
728
744
  }
729
- @-webkit-keyframes bounceOutUp {
745
+ @-webkit-keyframes animated-bounce-out-up {
730
746
  0% {
731
747
  -webkit-transform: translateY(0);
732
748
  transform: translateY(0);
@@ -742,7 +758,7 @@
742
758
  transform: translateY(-2000px);
743
759
  }
744
760
  }
745
- @keyframes bounceOutUp {
761
+ @keyframes animated-bounce-out-up {
746
762
  0% {
747
763
  -webkit-transform: translateY(0);
748
764
  -ms-transform: translateY(0);
@@ -761,23 +777,25 @@
761
777
  transform: translateY(-2000px);
762
778
  }
763
779
  }
764
- .bounceOutUp {
765
- -webkit-animation-name: bounceOutUp;
766
- animation-name: bounceOutUp;
780
+ .animated-bounce-out-up {
781
+ -webkit-animation-name: animated-bounce-out-up;
782
+ -ms-animation-name: animated-bounce-out-up;
783
+ animation-name: animated-bounce-out-up;
767
784
  }
768
- @-webkit-keyframes fadeIn {
785
+ @-webkit-keyframes animated-fade-in {
769
786
  0% { opacity: 0; }
770
787
  100% { opacity: 1; }
771
788
  }
772
- @keyframes fadeIn {
789
+ @keyframes animated-fade-in {
773
790
  0% { opacity: 0; }
774
791
  100% { opacity: 1; }
775
792
  }
776
- .fadeIn {
777
- -webkit-animation-name: fadeIn;
778
- animation-name: fadeIn;
793
+ .animated-fade-in {
794
+ -webkit-animation-name: animated-fade-in;
795
+ -ms-animation-name: animated-fade-in;
796
+ animation-name: animated-fade-in;
779
797
  }
780
- @-webkit-keyframes fadeInDown {
798
+ @-webkit-keyframes animated-fade-in-down {
781
799
  0% {
782
800
  opacity: 0;
783
801
  -webkit-transform: translateY(-20px);
@@ -789,7 +807,7 @@
789
807
  transform: translateY(0);
790
808
  }
791
809
  }
792
- @keyframes fadeInDown {
810
+ @keyframes animated-fade-in-down {
793
811
  0% {
794
812
  opacity: 0;
795
813
  -webkit-transform: translateY(-20px);
@@ -803,11 +821,12 @@
803
821
  transform: translateY(0);
804
822
  }
805
823
  }
806
- .fadeInDown {
807
- -webkit-animation-name: fadeInDown;
808
- animation-name: fadeInDown;
824
+ .animated-fade-in-down {
825
+ -webkit-animation-name: animated-fade-in-down;
826
+ -ms-animation-name: animated-fade-in-down;
827
+ animation-name: animated-fade-in-down;
809
828
  }
810
- @-webkit-keyframes fadeInDownBig {
829
+ @-webkit-keyframes animated-fade-in-down-big {
811
830
  0% {
812
831
  opacity: 0;
813
832
  -webkit-transform: translateY(-2000px);
@@ -819,7 +838,7 @@
819
838
  transform: translateY(0);
820
839
  }
821
840
  }
822
- @keyframes fadeInDownBig {
841
+ @keyframes animated-fade-in-down-big {
823
842
  0% {
824
843
  opacity: 0;
825
844
  -webkit-transform: translateY(-2000px);
@@ -833,11 +852,12 @@
833
852
  transform: translateY(0);
834
853
  }
835
854
  }
836
- .fadeInDownBig {
837
- -webkit-animation-name: fadeInDownBig;
838
- animation-name: fadeInDownBig;
855
+ .animated-fade-in-down-big {
856
+ -webkit-animation-name: animated-fade-in-down-big;
857
+ -ms-animation-name: animated-fade-in-down-big;
858
+ animation-name: animated-fade-in-down-big;
839
859
  }
840
- @-webkit-keyframes fadeInLeft {
860
+ @-webkit-keyframes animated-fade-in-left {
841
861
  0% {
842
862
  opacity: 0;
843
863
  -webkit-transform: translateX(-20px);
@@ -849,7 +869,7 @@
849
869
  transform: translateX(0);
850
870
  }
851
871
  }
852
- @keyframes fadeInLeft {
872
+ @keyframes animated-fade-in-left {
853
873
  0% {
854
874
  opacity: 0;
855
875
  -webkit-transform: translateX(-20px);
@@ -863,11 +883,12 @@
863
883
  transform: translateX(0);
864
884
  }
865
885
  }
866
- .fadeInLeft {
867
- -webkit-animation-name: fadeInLeft;
868
- animation-name: fadeInLeft;
886
+ .animated-fade-in-left {
887
+ -webkit-animation-name: animated-fade-in-left;
888
+ -ms-animation-name: animated-fade-in-left;
889
+ animation-name: animated-fade-in-left;
869
890
  }
870
- @-webkit-keyframes fadeInLeftBig {
891
+ @-webkit-keyframes animated-fade-in-left-big {
871
892
  0% {
872
893
  opacity: 0;
873
894
  -webkit-transform: translateX(-2000px);
@@ -879,7 +900,7 @@
879
900
  transform: translateX(0);
880
901
  }
881
902
  }
882
- @keyframes fadeInLeftBig {
903
+ @keyframes animated-fade-in-left-big {
883
904
  0% {
884
905
  opacity: 0;
885
906
  -webkit-transform: translateX(-2000px);
@@ -893,11 +914,12 @@
893
914
  transform: translateX(0);
894
915
  }
895
916
  }
896
- .fadeInLeftBig {
897
- -webkit-animation-name: fadeInLeftBig;
898
- animation-name: fadeInLeftBig;
917
+ .animated-fade-in-left-big {
918
+ -webkit-animation-name: animated-fade-in-left-big;
919
+ -ms-animation-name: animated-fade-in-left-big;
920
+ animation-name: animated-fade-in-left-big;
899
921
  }
900
- @-webkit-keyframes fadeInRight {
922
+ @-webkit-keyframes animated-fade-in-right {
901
923
  0% {
902
924
  opacity: 0;
903
925
  -webkit-transform: translateX(20px);
@@ -909,7 +931,7 @@
909
931
  transform: translateX(0);
910
932
  }
911
933
  }
912
- @keyframes fadeInRight {
934
+ @keyframes animated-fade-in-right {
913
935
  0% {
914
936
  opacity: 0;
915
937
  -webkit-transform: translateX(20px);
@@ -923,11 +945,12 @@
923
945
  transform: translateX(0);
924
946
  }
925
947
  }
926
- .fadeInRight {
927
- -webkit-animation-name: fadeInRight;
928
- animation-name: fadeInRight;
948
+ .animated-fade-in-right {
949
+ -webkit-animation-name: animated-fade-in-right;
950
+ -ms-animation-name: animated-fade-in-right;
951
+ animation-name: animated-fade-in-right;
929
952
  }
930
- @-webkit-keyframes fadeInRightBig {
953
+ @-webkit-keyframes animated-fade-in-right-big {
931
954
  0% {
932
955
  opacity: 0;
933
956
  -webkit-transform: translateX(2000px);
@@ -939,7 +962,7 @@
939
962
  transform: translateX(0);
940
963
  }
941
964
  }
942
- @keyframes fadeInRightBig {
965
+ @keyframes animated-fade-in-right-big {
943
966
  0% {
944
967
  opacity: 0;
945
968
  -webkit-transform: translateX(2000px);
@@ -953,11 +976,12 @@
953
976
  transform: translateX(0);
954
977
  }
955
978
  }
956
- .fadeInRightBig {
957
- -webkit-animation-name: fadeInRightBig;
958
- animation-name: fadeInRightBig;
979
+ .animated-fade-in-right-big {
980
+ -webkit-animation-name: animated-fade-in-right-big;
981
+ -ms-animation-name: animated-fade-in-right-big;
982
+ animation-name: animated-fade-in-right-big;
959
983
  }
960
- @-webkit-keyframes fadeInUp {
984
+ @-webkit-keyframes animated-fade-in-up {
961
985
  0% {
962
986
  opacity: 0;
963
987
  -webkit-transform: translateY(20px);
@@ -969,7 +993,7 @@
969
993
  transform: translateY(0);
970
994
  }
971
995
  }
972
- @keyframes fadeInUp {
996
+ @keyframes animated-fade-in-up {
973
997
  0% {
974
998
  opacity: 0;
975
999
  -webkit-transform: translateY(20px);
@@ -983,11 +1007,12 @@
983
1007
  transform: translateY(0);
984
1008
  }
985
1009
  }
986
- .fadeInUp {
987
- -webkit-animation-name: fadeInUp;
988
- animation-name: fadeInUp;
1010
+ .animated-fade-in-up {
1011
+ -webkit-animation-name: animated-fade-in-up;
1012
+ -ms-animation-name: animated-fade-in-up;
1013
+ animation-name: animated-fade-in-up;
989
1014
  }
990
- @-webkit-keyframes fadeInUpBig {
1015
+ @-webkit-keyframes animated-fade-in-up-big {
991
1016
  0% {
992
1017
  opacity: 0;
993
1018
  -webkit-transform: translateY(2000px);
@@ -999,7 +1024,7 @@
999
1024
  transform: translateY(0);
1000
1025
  }
1001
1026
  }
1002
- @keyframes fadeInUpBig {
1027
+ @keyframes animated-fade-in-up-big {
1003
1028
  0% {
1004
1029
  opacity: 0;
1005
1030
  -webkit-transform: translateY(2000px);
@@ -1013,23 +1038,25 @@
1013
1038
  transform: translateY(0);
1014
1039
  }
1015
1040
  }
1016
- .fadeInUpBig {
1017
- -webkit-animation-name: fadeInUpBig;
1018
- animation-name: fadeInUpBig;
1041
+ .animated-fade-in-up-big {
1042
+ -webkit-animation-name: animated-fade-in-up-big;
1043
+ -ms-animation-name: animated-fade-in-up-big;
1044
+ animation-name: animated-fade-in-up-big;
1019
1045
  }
1020
- @-webkit-keyframes fadeOut {
1046
+ @-webkit-keyframes animated-fade-out {
1021
1047
  0% { opacity: 1; }
1022
1048
  100% { opacity: 0; }
1023
1049
  }
1024
- @keyframes fadeOut {
1050
+ @keyframes animated-fade-out {
1025
1051
  0% { opacity: 1; }
1026
1052
  100% { opacity: 0; }
1027
1053
  }
1028
- .fadeOut {
1029
- -webkit-animation-name: fadeOut;
1030
- animation-name: fadeOut;
1054
+ .animated-fade-out {
1055
+ -webkit-animation-name: animated-fade-out;
1056
+ -ms-animation-name: animated-fade-out;
1057
+ animation-name: animated-fade-out;
1031
1058
  }
1032
- @-webkit-keyframes fadeOutDown {
1059
+ @-webkit-keyframes animated-fade-out-down {
1033
1060
  0% {
1034
1061
  opacity: 1;
1035
1062
  -webkit-transform: translateY(0);
@@ -1041,7 +1068,7 @@
1041
1068
  transform: translateY(20px);
1042
1069
  }
1043
1070
  }
1044
- @keyframes fadeOutDown {
1071
+ @keyframes animated-fade-out-down {
1045
1072
  0% {
1046
1073
  opacity: 1;
1047
1074
  -webkit-transform: translateY(0);
@@ -1055,11 +1082,12 @@
1055
1082
  transform: translateY(20px);
1056
1083
  }
1057
1084
  }
1058
- .fadeOutDown {
1059
- -webkit-animation-name: fadeOutDown;
1060
- animation-name: fadeOutDown;
1085
+ .animated-fade-out-down {
1086
+ -webkit-animation-name: animated-fade-out-down;
1087
+ -ms-animation-name: animated-fade-out-down;
1088
+ animation-name: animated-fade-out-down;
1061
1089
  }
1062
- @-webkit-keyframes fadeOutDownBig {
1090
+ @-webkit-keyframes animated-fade-out-down-big {
1063
1091
  0% {
1064
1092
  opacity: 1;
1065
1093
  -webkit-transform: translateY(0);
@@ -1071,7 +1099,7 @@
1071
1099
  transform: translateY(2000px);
1072
1100
  }
1073
1101
  }
1074
- @keyframes fadeOutDownBig {
1102
+ @keyframes animated-fade-out-down-big {
1075
1103
  0% {
1076
1104
  opacity: 1;
1077
1105
  -webkit-transform: translateY(0);
@@ -1085,11 +1113,12 @@
1085
1113
  transform: translateY(2000px);
1086
1114
  }
1087
1115
  }
1088
- .fadeOutDownBig {
1089
- -webkit-animation-name: fadeOutDownBig;
1090
- animation-name: fadeOutDownBig;
1116
+ .animated-fade-out-down-big {
1117
+ -webkit-animation-name: animated-fade-out-down-big;
1118
+ -ms-animation-name: animated-fade-out-down-big;
1119
+ animation-name: animated-fade-out-down-big;
1091
1120
  }
1092
- @-webkit-keyframes fadeOutLeft {
1121
+ @-webkit-keyframes animated-fade-out-left {
1093
1122
  0% {
1094
1123
  opacity: 1;
1095
1124
  -webkit-transform: translateX(0);
@@ -1101,7 +1130,7 @@
1101
1130
  transform: translateX(-20px);
1102
1131
  }
1103
1132
  }
1104
- @keyframes fadeOutLeft {
1133
+ @keyframes animated-fade-out-left {
1105
1134
  0% {
1106
1135
  opacity: 1;
1107
1136
  -webkit-transform: translateX(0);
@@ -1115,11 +1144,12 @@
1115
1144
  transform: translateX(-20px);
1116
1145
  }
1117
1146
  }
1118
- .fadeOutLeft {
1119
- -webkit-animation-name: fadeOutLeft;
1120
- animation-name: fadeOutLeft;
1147
+ .animated-fade-out-left {
1148
+ -webkit-animation-name: animated-fade-out-left;
1149
+ -ms-animation-name: animated-fade-out-left;
1150
+ animation-name: animated-fade-out-left;
1121
1151
  }
1122
- @-webkit-keyframes fadeOutLeftBig {
1152
+ @-webkit-keyframes animated-fade-out-left-big {
1123
1153
  0% {
1124
1154
  opacity: 1;
1125
1155
  -webkit-transform: translateX(0);
@@ -1131,7 +1161,7 @@
1131
1161
  transform: translateX(-2000px);
1132
1162
  }
1133
1163
  }
1134
- @keyframes fadeOutLeftBig {
1164
+ @keyframes animated-fade-out-left-big {
1135
1165
  0% {
1136
1166
  opacity: 1;
1137
1167
  -webkit-transform: translateX(0);
@@ -1145,11 +1175,12 @@
1145
1175
  transform: translateX(-2000px);
1146
1176
  }
1147
1177
  }
1148
- .fadeOutLeftBig {
1149
- -webkit-animation-name: fadeOutLeftBig;
1150
- animation-name: fadeOutLeftBig;
1178
+ .animated-fade-out-left-big {
1179
+ -webkit-animation-name: animated-fade-out-left-big;
1180
+ -ms-animation-name: animated-fade-out-left-big;
1181
+ animation-name: animated-fade-out-left-big;
1151
1182
  }
1152
- @-webkit-keyframes fadeOutRight {
1183
+ @-webkit-keyframes animated-fade-out-right {
1153
1184
  0% {
1154
1185
  opacity: 1;
1155
1186
  -webkit-transform: translateX(0);
@@ -1161,7 +1192,7 @@
1161
1192
  transform: translateX(20px);
1162
1193
  }
1163
1194
  }
1164
- @keyframes fadeOutRight {
1195
+ @keyframes animated-fade-out-right {
1165
1196
  0% {
1166
1197
  opacity: 1;
1167
1198
  -webkit-transform: translateX(0);
@@ -1175,11 +1206,12 @@
1175
1206
  transform: translateX(20px);
1176
1207
  }
1177
1208
  }
1178
- .fadeOutRight {
1179
- -webkit-animation-name: fadeOutRight;
1180
- animation-name: fadeOutRight;
1209
+ .animated-fade-out-right {
1210
+ -webkit-animation-name: animated-fade-out-right;
1211
+ -ms-animation-name: animated-fade-out-right;
1212
+ animation-name: animated-fade-out-right;
1181
1213
  }
1182
- @-webkit-keyframes fadeOutRightBig {
1214
+ @-webkit-keyframes animated-fade-out-right-big {
1183
1215
  0% {
1184
1216
  opacity: 1;
1185
1217
  -webkit-transform: translateX(0);
@@ -1191,7 +1223,7 @@
1191
1223
  transform: translateX(2000px);
1192
1224
  }
1193
1225
  }
1194
- @keyframes fadeOutRightBig {
1226
+ @keyframes animated-fade-out-right-big {
1195
1227
  0% {
1196
1228
  opacity: 1;
1197
1229
  -webkit-transform: translateX(0);
@@ -1205,11 +1237,12 @@
1205
1237
  transform: translateX(2000px);
1206
1238
  }
1207
1239
  }
1208
- .fadeOutRightBig {
1209
- -webkit-animation-name: fadeOutRightBig;
1210
- animation-name: fadeOutRightBig;
1240
+ .animated-fade-out-right-big {
1241
+ -webkit-animation-name: animated-fade-out-right-big;
1242
+ -ms-animation-name: animated-fade-out-right-big;
1243
+ animation-name: animated-fade-out-right-big;
1211
1244
  }
1212
- @-webkit-keyframes fadeOutUp {
1245
+ @-webkit-keyframes animated-fade-out-up {
1213
1246
  0% {
1214
1247
  opacity: 1;
1215
1248
  -webkit-transform: translateY(0);
@@ -1221,7 +1254,7 @@
1221
1254
  transform: translateY(-20px);
1222
1255
  }
1223
1256
  }
1224
- @keyframes fadeOutUp {
1257
+ @keyframes animated-fade-out-up {
1225
1258
  0% {
1226
1259
  opacity: 1;
1227
1260
  -webkit-transform: translateY(0);
@@ -1235,11 +1268,12 @@
1235
1268
  transform: translateY(-20px);
1236
1269
  }
1237
1270
  }
1238
- .fadeOutUp {
1239
- -webkit-animation-name: fadeOutUp;
1240
- animation-name: fadeOutUp;
1271
+ .animated-fade-out-up {
1272
+ -webkit-animation-name: animated-fade-out-up;
1273
+ -ms-animation-name: animated-fade-out-up;
1274
+ animation-name: animated-fade-out-up;
1241
1275
  }
1242
- @-webkit-keyframes fadeOutUpBig {
1276
+ @-webkit-keyframes animated-fade-out-up-big {
1243
1277
  0% {
1244
1278
  opacity: 1;
1245
1279
  -webkit-transform: translateY(0);
@@ -1251,7 +1285,7 @@
1251
1285
  transform: translateY(-2000px);
1252
1286
  }
1253
1287
  }
1254
- @keyframes fadeOutUpBig {
1288
+ @keyframes animated-fade-out-up-big {
1255
1289
  0% {
1256
1290
  opacity: 1;
1257
1291
  -webkit-transform: translateY(0);
@@ -1265,91 +1299,98 @@
1265
1299
  transform: translateY(-2000px);
1266
1300
  }
1267
1301
  }
1268
- .fadeOutUpBig {
1269
- -webkit-animation-name: fadeOutUpBig;
1270
- animation-name: fadeOutUpBig;
1302
+ .animated-fade-out-up-big {
1303
+ -webkit-animation-name: animated-fade-out-up-big;
1304
+ -ms-animation-name: animated-fade-out-up-big;
1305
+ animation-name: animated-fade-out-up-big;
1271
1306
  }
1272
- @-webkit-keyframes flip {
1307
+ @-webkit-keyframes animated-flip {
1273
1308
  0% {
1309
+ -webkit-animation-timing-function: ease-out;
1310
+ animation-timing-function: ease-out;
1274
1311
  -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1275
1312
  transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1276
- -webkit-animation-timing-function: ease-out;
1277
- animation-timing-function: ease-out;
1278
1313
  }
1279
1314
  40% {
1315
+ -webkit-animation-timing-function: ease-out;
1316
+ animation-timing-function: ease-out;
1280
1317
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1281
1318
  transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1282
- -webkit-animation-timing-function: ease-out;
1283
- animation-timing-function: ease-out;
1284
1319
  }
1285
1320
  50% {
1321
+ -webkit-animation-timing-function: ease-in;
1322
+ animation-timing-function: ease-in;
1286
1323
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1287
1324
  transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1288
- -webkit-animation-timing-function: ease-in;
1289
- animation-timing-function: ease-in;
1290
1325
  }
1291
1326
  80% {
1327
+ -webkit-animation-timing-function: ease-in;
1328
+ animation-timing-function: ease-in;
1292
1329
  -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1293
1330
  transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1294
- -webkit-animation-timing-function: ease-in;
1295
- animation-timing-function: ease-in;
1296
1331
  }
1297
1332
  100% {
1333
+ -webkit-animation-timing-function: ease-in;
1334
+ animation-timing-function: ease-in;
1298
1335
  -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1299
1336
  transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1300
- -webkit-animation-timing-function: ease-in;
1301
- animation-timing-function: ease-in;
1302
1337
  }
1303
1338
  }
1304
- @keyframes flip {
1339
+ @keyframes animated-flip {
1305
1340
  0% {
1341
+ -webkit-animation-timing-function: ease-out;
1342
+ -ms-animation-timing-function: ease-out;
1343
+ animation-timing-function: ease-out;
1306
1344
  -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1307
1345
  -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1308
1346
  transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1309
- -webkit-animation-timing-function: ease-out;
1310
- animation-timing-function: ease-out;
1311
1347
  }
1312
1348
  40% {
1349
+ -webkit-animation-timing-function: ease-out;
1350
+ -ms-animation-timing-function: ease-out;
1351
+ animation-timing-function: ease-out;
1313
1352
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1314
1353
  -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1315
1354
  transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1316
- -webkit-animation-timing-function: ease-out;
1317
- animation-timing-function: ease-out;
1318
1355
  }
1319
1356
  50% {
1357
+ -webkit-animation-timing-function: ease-in;
1358
+ -ms-animation-timing-function: ease-in;
1359
+ animation-timing-function: ease-in;
1320
1360
  -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1321
1361
  -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1322
1362
  transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1323
- -webkit-animation-timing-function: ease-in;
1324
- animation-timing-function: ease-in;
1325
1363
  }
1326
1364
  80% {
1365
+ -webkit-animation-timing-function: ease-in;
1366
+ -ms-animation-timing-function: ease-in;
1367
+ animation-timing-function: ease-in;
1327
1368
  -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1328
1369
  -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1329
1370
  transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1330
- -webkit-animation-timing-function: ease-in;
1331
- animation-timing-function: ease-in;
1332
1371
  }
1333
1372
  100% {
1373
+ -webkit-animation-timing-function: ease-in;
1374
+ -ms-animation-timing-function: ease-in;
1375
+ animation-timing-function: ease-in;
1334
1376
  -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1335
1377
  -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1336
1378
  transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1337
- -webkit-animation-timing-function: ease-in;
1338
- animation-timing-function: ease-in;
1339
1379
  }
1340
1380
  }
1341
- .animated.flip {
1342
- -webkit-backface-visibility: visible;
1343
- -ms-backface-visibility: visible;
1344
- backface-visibility: visible;
1345
- -webkit-animation-name: flip;
1346
- animation-name: flip;
1381
+ .animated-flip {
1382
+ -webkit-animation-name: animated-flip;
1383
+ -ms-animation-name: animated-flip;
1384
+ animation-name: animated-flip;
1385
+ -webkit-backface-visibility: visible !important;
1386
+ -ms-backface-visibility: visible !important;
1387
+ backface-visibility: visible !important;
1347
1388
  }
1348
- @-webkit-keyframes flipInX {
1389
+ @-webkit-keyframes animated-flip-in-x {
1349
1390
  0% {
1391
+ opacity: 0;
1350
1392
  -webkit-transform: perspective(400px) rotateX(90deg);
1351
1393
  transform: perspective(400px) rotateX(90deg);
1352
- opacity: 0;
1353
1394
  }
1354
1395
  40% {
1355
1396
  -webkit-transform: perspective(400px) rotateX(-10deg);
@@ -1360,17 +1401,17 @@
1360
1401
  transform: perspective(400px) rotateX(10deg);
1361
1402
  }
1362
1403
  100% {
1404
+ opacity: 1;
1363
1405
  -webkit-transform: perspective(400px) rotateX(0deg);
1364
1406
  transform: perspective(400px) rotateX(0deg);
1365
- opacity: 1;
1366
1407
  }
1367
1408
  }
1368
- @keyframes flipInX {
1409
+ @keyframes animated-flip-in-x {
1369
1410
  0% {
1411
+ opacity: 0;
1370
1412
  -webkit-transform: perspective(400px) rotateX(90deg);
1371
1413
  -ms-transform: perspective(400px) rotateX(90deg);
1372
1414
  transform: perspective(400px) rotateX(90deg);
1373
- opacity: 0;
1374
1415
  }
1375
1416
  40% {
1376
1417
  -webkit-transform: perspective(400px) rotateX(-10deg);
@@ -1383,24 +1424,25 @@
1383
1424
  transform: perspective(400px) rotateX(10deg);
1384
1425
  }
1385
1426
  100% {
1427
+ opacity: 1;
1386
1428
  -webkit-transform: perspective(400px) rotateX(0deg);
1387
1429
  -ms-transform: perspective(400px) rotateX(0deg);
1388
1430
  transform: perspective(400px) rotateX(0deg);
1389
- opacity: 1;
1390
1431
  }
1391
1432
  }
1392
- .flipInX {
1433
+ .animated-flip-in-x {
1434
+ -webkit-animation-name: animated-flip-in-x;
1435
+ -ms-animation-name: animated-flip-in-x;
1436
+ animation-name: animated-flip-in-x;
1393
1437
  -webkit-backface-visibility: visible !important;
1394
- -ms-backface-visibility: visible !important;
1395
- backface-visibility: visible !important;
1396
- -webkit-animation-name: flipInX;
1397
- animation-name: flipInX;
1438
+ -ms-backface-visibility: visible !important;
1439
+ backface-visibility: visible !important;
1398
1440
  }
1399
- @-webkit-keyframes flipInY {
1441
+ @-webkit-keyframes animated-flip-in-y {
1400
1442
  0% {
1443
+ opacity: 0;
1401
1444
  -webkit-transform: perspective(400px) rotateY(90deg);
1402
1445
  transform: perspective(400px) rotateY(90deg);
1403
- opacity: 0;
1404
1446
  }
1405
1447
  40% {
1406
1448
  -webkit-transform: perspective(400px) rotateY(-10deg);
@@ -1411,17 +1453,17 @@
1411
1453
  transform: perspective(400px) rotateY(10deg);
1412
1454
  }
1413
1455
  100% {
1456
+ opacity: 1;
1414
1457
  -webkit-transform: perspective(400px) rotateY(0deg);
1415
1458
  transform: perspective(400px) rotateY(0deg);
1416
- opacity: 1;
1417
1459
  }
1418
1460
  }
1419
- @keyframes flipInY {
1461
+ @keyframes animated-flip-in-y {
1420
1462
  0% {
1463
+ opacity: 0;
1421
1464
  -webkit-transform: perspective(400px) rotateY(90deg);
1422
1465
  -ms-transform: perspective(400px) rotateY(90deg);
1423
1466
  transform: perspective(400px) rotateY(90deg);
1424
- opacity: 0;
1425
1467
  }
1426
1468
  40% {
1427
1469
  -webkit-transform: perspective(400px) rotateY(-10deg);
@@ -1434,534 +1476,550 @@
1434
1476
  transform: perspective(400px) rotateY(10deg);
1435
1477
  }
1436
1478
  100% {
1479
+ opacity: 1;
1437
1480
  -webkit-transform: perspective(400px) rotateY(0deg);
1438
1481
  -ms-transform: perspective(400px) rotateY(0deg);
1439
1482
  transform: perspective(400px) rotateY(0deg);
1440
- opacity: 1;
1441
1483
  }
1442
1484
  }
1443
- .flipInY {
1485
+ .animated-flip-in-y {
1486
+ -webkit-animation-name: animated-flip-in-y;
1487
+ -ms-animation-name: animated-flip-in-y;
1488
+ animation-name: animated-flip-in-y;
1444
1489
  -webkit-backface-visibility: visible !important;
1445
- -ms-backface-visibility: visible !important;
1446
- backface-visibility: visible !important;
1447
- -webkit-animation-name: flipInY;
1448
- animation-name: flipInY;
1490
+ -ms-backface-visibility: visible !important;
1491
+ backface-visibility: visible !important;
1449
1492
  }
1450
- @-webkit-keyframes flipOutX {
1493
+ @-webkit-keyframes animated-flip-out-x {
1451
1494
  0% {
1495
+ opacity: 1;
1452
1496
  -webkit-transform: perspective(400px) rotateX(0deg);
1453
1497
  transform: perspective(400px) rotateX(0deg);
1454
- opacity: 1;
1455
1498
  }
1456
1499
 
1457
1500
  100% {
1501
+ opacity: 0;
1458
1502
  -webkit-transform: perspective(400px) rotateX(90deg);
1459
1503
  transform: perspective(400px) rotateX(90deg);
1460
- opacity: 0;
1461
1504
  }
1462
1505
  }
1463
- @keyframes flipOutX {
1506
+ @keyframes animated-flip-out-x {
1464
1507
  0% {
1508
+ opacity: 1;
1465
1509
  -webkit-transform: perspective(400px) rotateX(0deg);
1466
1510
  -ms-transform: perspective(400px) rotateX(0deg);
1467
1511
  transform: perspective(400px) rotateX(0deg);
1468
- opacity: 1;
1469
1512
  }
1470
1513
  100% {
1514
+ opacity: 0;
1471
1515
  -webkit-transform: perspective(400px) rotateX(90deg);
1472
1516
  -ms-transform: perspective(400px) rotateX(90deg);
1473
1517
  transform: perspective(400px) rotateX(90deg);
1474
- opacity: 0;
1475
1518
  }
1476
1519
  }
1477
- .flipOutX {
1478
- -webkit-animation-name: flipOutX;
1479
- animation-name: flipOutX;
1520
+ .animated-flip-out-x {
1521
+ -webkit-animation-name: animated-flip-out-x;
1522
+ -ms-animation-name: animated-flip-out-x;
1523
+ animation-name: animated-flip-out-x;
1480
1524
  -webkit-backface-visibility: visible !important;
1481
- -ms-backface-visibility: visible !important;
1482
- backface-visibility: visible !important;
1525
+ -ms-backface-visibility: visible !important;
1526
+ backface-visibility: visible !important;
1483
1527
  }
1484
- @-webkit-keyframes flipOutY {
1528
+ @-webkit-keyframes animated-flip-out-y {
1485
1529
  0% {
1530
+ opacity: 1;
1486
1531
  -webkit-transform: perspective(400px) rotateY(0deg);
1487
1532
  transform: perspective(400px) rotateY(0deg);
1488
- opacity: 1;
1489
1533
  }
1490
1534
  100% {
1535
+ opacity: 0;
1491
1536
  -webkit-transform: perspective(400px) rotateY(90deg);
1492
1537
  transform: perspective(400px) rotateY(90deg);
1493
- opacity: 0;
1494
1538
  }
1495
1539
  }
1496
- @keyframes flipOutY {
1540
+ @keyframes animated-flip-out-y {
1497
1541
  0% {
1542
+ opacity: 1;
1498
1543
  -webkit-transform: perspective(400px) rotateY(0deg);
1499
1544
  -ms-transform: perspective(400px) rotateY(0deg);
1500
1545
  transform: perspective(400px) rotateY(0deg);
1501
- opacity: 1;
1502
1546
  }
1503
1547
  100% {
1548
+ opacity: 0;
1504
1549
  -webkit-transform: perspective(400px) rotateY(90deg);
1505
1550
  -ms-transform: perspective(400px) rotateY(90deg);
1506
1551
  transform: perspective(400px) rotateY(90deg);
1507
- opacity: 0;
1508
1552
  }
1509
1553
  }
1510
- .flipOutY {
1554
+ .animated-flip-out-y {
1555
+ -webkit-animation-name: animated-flip-out-y;
1556
+ -ms-animation-name: animated-flip-out-y;
1557
+ animation-name: animated-flip-out-y;
1511
1558
  -webkit-backface-visibility: visible !important;
1512
- -ms-backface-visibility: visible !important;
1513
- backface-visibility: visible !important;
1514
- -webkit-animation-name: flipOutY;
1515
- animation-name: flipOutY;
1559
+ -ms-backface-visibility: visible !important;
1560
+ backface-visibility: visible !important;
1516
1561
  }
1517
- @-webkit-keyframes lightSpeedIn {
1562
+ @-webkit-keyframes animated-light-speed-in {
1518
1563
  0% {
1564
+ opacity: 0;
1519
1565
  -webkit-transform: translateX(100%) skewX(-30deg);
1520
1566
  transform: translateX(100%) skewX(-30deg);
1521
- opacity: 0;
1522
1567
  }
1523
1568
  60% {
1569
+ opacity: 1;
1524
1570
  -webkit-transform: translateX(-20%) skewX(30deg);
1525
1571
  transform: translateX(-20%) skewX(30deg);
1526
- opacity: 1;
1527
1572
  }
1528
1573
  80% {
1574
+ opacity: 1;
1529
1575
  -webkit-transform: translateX(0%) skewX(-15deg);
1530
1576
  transform: translateX(0%) skewX(-15deg);
1531
- opacity: 1;
1532
1577
  }
1533
1578
  100% {
1579
+ opacity: 1;
1534
1580
  -webkit-transform: translateX(0%) skewX(0deg);
1535
1581
  transform: translateX(0%) skewX(0deg);
1536
- opacity: 1;
1537
1582
  }
1538
1583
  }
1539
- @keyframes lightSpeedIn {
1584
+ @keyframes animated-light-speed-in {
1540
1585
  0% {
1586
+ opacity: 0;
1541
1587
  -webkit-transform: translateX(100%) skewX(-30deg);
1542
1588
  -ms-transform: translateX(100%) skewX(-30deg);
1543
1589
  transform: translateX(100%) skewX(-30deg);
1544
- opacity: 0;
1545
1590
  }
1546
1591
  60% {
1592
+ opacity: 1;
1547
1593
  -webkit-transform: translateX(-20%) skewX(30deg);
1548
1594
  -ms-transform: translateX(-20%) skewX(30deg);
1549
1595
  transform: translateX(-20%) skewX(30deg);
1550
- opacity: 1;
1551
1596
  }
1552
1597
  80% {
1598
+ opacity: 1;
1553
1599
  -webkit-transform: translateX(0%) skewX(-15deg);
1554
1600
  -ms-transform: translateX(0%) skewX(-15deg);
1555
1601
  transform: translateX(0%) skewX(-15deg);
1556
- opacity: 1;
1557
1602
  }
1558
1603
  100% {
1604
+ opacity: 1;
1559
1605
  -webkit-transform: translateX(0%) skewX(0deg);
1560
1606
  -ms-transform: translateX(0%) skewX(0deg);
1561
1607
  transform: translateX(0%) skewX(0deg);
1562
- opacity: 1;
1563
1608
  }
1564
1609
  }
1565
- .lightSpeedIn {
1566
- -webkit-animation-name: lightSpeedIn;
1567
- animation-name: lightSpeedIn;
1610
+ .animated-light-speed-in {
1611
+ -webkit-animation-name: animated-light-speed-in;
1612
+ -ms-animation-name: animated-light-speed-in;
1613
+ animation-name: animated-light-speed-in;
1568
1614
  -webkit-animation-timing-function: ease-out;
1569
- animation-timing-function: ease-out;
1615
+ -ms-animation-timing-function: ease-out;
1616
+ animation-timing-function: ease-out;
1570
1617
  }
1571
- @-webkit-keyframes lightSpeedOut {
1618
+ @-webkit-keyframes animated-light-speed-out {
1572
1619
  0% {
1620
+ opacity: 1;
1573
1621
  -webkit-transform: translateX(0%) skewX(0deg);
1574
1622
  transform: translateX(0%) skewX(0deg);
1575
- opacity: 1;
1576
1623
  }
1577
1624
 
1578
1625
  100% {
1626
+ opacity: 0;
1579
1627
  -webkit-transform: translateX(100%) skewX(-30deg);
1580
1628
  transform: translateX(100%) skewX(-30deg);
1581
- opacity: 0;
1582
1629
  }
1583
1630
  }
1584
- @keyframes lightSpeedOut {
1631
+ @keyframes animated-light-speed-out {
1585
1632
  0% {
1633
+ opacity: 1;
1586
1634
  -webkit-transform: translateX(0%) skewX(0deg);
1587
1635
  -ms-transform: translateX(0%) skewX(0deg);
1588
1636
  transform: translateX(0%) skewX(0deg);
1589
- opacity: 1;
1590
1637
  }
1591
1638
  100% {
1639
+ opacity: 0;
1592
1640
  -webkit-transform: translateX(100%) skewX(-30deg);
1593
1641
  -ms-transform: translateX(100%) skewX(-30deg);
1594
1642
  transform: translateX(100%) skewX(-30deg);
1595
- opacity: 0;
1596
1643
  }
1597
1644
  }
1598
- .lightSpeedOut {
1599
- -webkit-animation-name: lightSpeedOut;
1600
- animation-name: lightSpeedOut;
1645
+ .animated-light-speed-out {
1646
+ -webkit-animation-name: animated-light-speed-out;
1647
+ -ms-animation-name: animated-light-speed-out;
1648
+ animation-name: animated-light-speed-out;
1601
1649
  -webkit-animation-timing-function: ease-in;
1602
- animation-timing-function: ease-in;
1650
+ -ms-animation-timing-function: ease-in;
1651
+ animation-timing-function: ease-in;
1603
1652
  }
1604
- @-webkit-keyframes rotateIn {
1653
+ @-webkit-keyframes animated-rotate-in {
1605
1654
  0% {
1606
- -webkit-transform-origin: center center;
1607
- transform-origin: center center;
1655
+ opacity: 0;
1608
1656
  -webkit-transform: rotate(-200deg);
1609
1657
  transform: rotate(-200deg);
1610
- opacity: 0;
1658
+ -webkit-transform-origin: center center;
1659
+ transform-origin: center center;
1611
1660
  }
1612
1661
  100% {
1613
- -webkit-transform-origin: center center;
1614
- transform-origin: center center;
1662
+ opacity: 1;
1615
1663
  -webkit-transform: rotate(0);
1616
1664
  transform: rotate(0);
1617
- opacity: 1;
1665
+ -webkit-transform-origin: center center;
1666
+ transform-origin: center center;
1618
1667
  }
1619
1668
  }
1620
- @keyframes rotateIn {
1669
+ @keyframes animated-rotate-in {
1621
1670
  0% {
1622
- -webkit-transform-origin: center center;
1623
- -ms-transform-origin: center center;
1624
- transform-origin: center center;
1671
+ opacity: 0;
1625
1672
  -webkit-transform: rotate(-200deg);
1626
1673
  -ms-transform: rotate(-200deg);
1627
1674
  transform: rotate(-200deg);
1628
- opacity: 0;
1675
+ -webkit-transform-origin: center center;
1676
+ -ms-transform-origin: center center;
1677
+ transform-origin: center center;
1629
1678
  }
1630
1679
  100% {
1631
- -webkit-transform-origin: center center;
1632
- -ms-transform-origin: center center;
1633
- transform-origin: center center;
1680
+ opacity: 1;
1634
1681
  -webkit-transform: rotate(0);
1635
1682
  -ms-transform: rotate(0);
1636
1683
  transform: rotate(0);
1637
- opacity: 1;
1684
+ -webkit-transform-origin: center center;
1685
+ -ms-transform-origin: center center;
1686
+ transform-origin: center center;
1638
1687
  }
1639
1688
  }
1640
- .rotateIn {
1641
- -webkit-animation-name: rotateIn;
1642
- animation-name: rotateIn;
1689
+ .animated-rotate-in {
1690
+ -webkit-animation-name: animated-rotate-in;
1691
+ -ms-animation-name: animated-rotate-in;
1692
+ animation-name: animated-rotate-in;
1643
1693
  }
1644
- @-webkit-keyframes rotateInDownLeft {
1694
+ @-webkit-keyframes animated-rotate-in-down-left {
1645
1695
  0% {
1646
- -webkit-transform-origin: left bottom;
1647
- transform-origin: left bottom;
1696
+ opacity: 0;
1648
1697
  -webkit-transform: rotate(-90deg);
1649
1698
  transform: rotate(-90deg);
1650
- opacity: 0;
1651
- }
1652
- 100% {
1653
1699
  -webkit-transform-origin: left bottom;
1654
1700
  transform-origin: left bottom;
1701
+ }
1702
+ 100% {
1703
+ opacity: 1;
1655
1704
  -webkit-transform: rotate(0);
1656
1705
  transform: rotate(0);
1657
- opacity: 1;
1706
+ -webkit-transform-origin: left bottom;
1707
+ transform-origin: left bottom;
1658
1708
  }
1659
1709
  }
1660
- @keyframes rotateInDownLeft {
1710
+ @keyframes animated-rotate-in-down-left {
1661
1711
  0% {
1662
- -webkit-transform-origin: left bottom;
1663
- -ms-transform-origin: left bottom;
1664
- transform-origin: left bottom;
1712
+ opacity: 0;
1665
1713
  -webkit-transform: rotate(-90deg);
1666
1714
  -ms-transform: rotate(-90deg);
1667
1715
  transform: rotate(-90deg);
1668
- opacity: 0;
1716
+ -webkit-transform-origin: left bottom;
1717
+ -ms-transform-origin: left bottom;
1718
+ transform-origin: left bottom;
1669
1719
  }
1670
1720
  100% {
1671
- -webkit-transform-origin: left bottom;
1672
- -ms-transform-origin: left bottom;
1673
- transform-origin: left bottom;
1721
+ opacity: 1;
1674
1722
  -webkit-transform: rotate(0);
1675
1723
  -ms-transform: rotate(0);
1676
1724
  transform: rotate(0);
1677
- opacity: 1;
1725
+ -webkit-transform-origin: left bottom;
1726
+ -ms-transform-origin: left bottom;
1727
+ transform-origin: left bottom;
1678
1728
  }
1679
1729
  }
1680
- .rotateInDownLeft {
1681
- -webkit-animation-name: rotateInDownLeft;
1682
- animation-name: rotateInDownLeft;
1730
+ .animated-rotate-in-down-left {
1731
+ -webkit-animation-name: animated-rotate-in-down-left;
1732
+ -ms-animation-name: animated-rotate-in-down-left;
1733
+ animation-name: animated-rotate-in-down-left;
1683
1734
  }
1684
- @-webkit-keyframes rotateInDownRight {
1735
+ @-webkit-keyframes animated-rotate-in-down-right {
1685
1736
  0% {
1686
- -webkit-transform-origin: right bottom;
1687
- transform-origin: right bottom;
1737
+ opacity: 0;
1688
1738
  -webkit-transform: rotate(90deg);
1689
1739
  transform: rotate(90deg);
1690
- opacity: 0;
1740
+ -webkit-transform-origin: right bottom;
1741
+ transform-origin: right bottom;
1691
1742
  }
1692
1743
  100% {
1693
- -webkit-transform-origin: right bottom;
1694
- transform-origin: right bottom;
1744
+ opacity: 1;
1695
1745
  -webkit-transform: rotate(0);
1696
1746
  transform: rotate(0);
1697
- opacity: 1;
1747
+ -webkit-transform-origin: right bottom;
1748
+ transform-origin: right bottom;
1698
1749
  }
1699
1750
  }
1700
- @keyframes rotateInDownRight {
1751
+ @keyframes animated-rotate-in-down-right {
1701
1752
  0% {
1702
- -webkit-transform-origin: right bottom;
1703
- -ms-transform-origin: right bottom;
1704
- transform-origin: right bottom;
1753
+ opacity: 0;
1705
1754
  -webkit-transform: rotate(90deg);
1706
1755
  -ms-transform: rotate(90deg);
1707
1756
  transform: rotate(90deg);
1708
- opacity: 0;
1757
+ -webkit-transform-origin: right bottom;
1758
+ -ms-transform-origin: right bottom;
1759
+ transform-origin: right bottom;
1709
1760
  }
1710
1761
  100% {
1711
- -webkit-transform-origin: right bottom;
1712
- -ms-transform-origin: right bottom;
1713
- transform-origin: right bottom;
1762
+ opacity: 1;
1714
1763
  -webkit-transform: rotate(0);
1715
1764
  -ms-transform: rotate(0);
1716
1765
  transform: rotate(0);
1717
- opacity: 1;
1766
+ -webkit-transform-origin: right bottom;
1767
+ -ms-transform-origin: right bottom;
1768
+ transform-origin: right bottom;
1718
1769
  }
1719
1770
  }
1720
- .rotateInDownRight {
1721
- -webkit-animation-name: rotateInDownRight;
1722
- animation-name: rotateInDownRight;
1771
+ .animated-rotate-in-down-right {
1772
+ -webkit-animation-name: animated-rotate-in-down-right;
1773
+ -ms-animation-name: animated-rotate-in-down-right;
1774
+ animation-name: animated-rotate-in-down-right;
1723
1775
  }
1724
- @-webkit-keyframes rotateInUpLeft {
1776
+ @-webkit-keyframes animated-rotate-in-up-left {
1725
1777
  0% {
1726
- -webkit-transform-origin: left bottom;
1727
- transform-origin: left bottom;
1778
+ opacity: 0;
1728
1779
  -webkit-transform: rotate(90deg);
1729
1780
  transform: rotate(90deg);
1730
- opacity: 0;
1781
+ -webkit-transform-origin: left bottom;
1782
+ transform-origin: left bottom;
1731
1783
  }
1732
1784
  100% {
1733
- -webkit-transform-origin: left bottom;
1734
- transform-origin: left bottom;
1785
+ opacity: 1;
1735
1786
  -webkit-transform: rotate(0);
1736
1787
  transform: rotate(0);
1737
- opacity: 1;
1788
+ -webkit-transform-origin: left bottom;
1789
+ transform-origin: left bottom;
1738
1790
  }
1739
1791
  }
1740
- @keyframes rotateInUpLeft {
1792
+ @keyframes animated-rotate-in-up-left {
1741
1793
  0% {
1742
- -webkit-transform-origin: left bottom;
1743
- -ms-transform-origin: left bottom;
1744
- transform-origin: left bottom;
1794
+ opacity: 0;
1745
1795
  -webkit-transform: rotate(90deg);
1746
1796
  -ms-transform: rotate(90deg);
1747
1797
  transform: rotate(90deg);
1748
- opacity: 0;
1798
+ -webkit-transform-origin: left bottom;
1799
+ -ms-transform-origin: left bottom;
1800
+ transform-origin: left bottom;
1749
1801
  }
1750
1802
  100% {
1751
- -webkit-transform-origin: left bottom;
1752
- -ms-transform-origin: left bottom;
1753
- transform-origin: left bottom;
1803
+ opacity: 1;
1754
1804
  -webkit-transform: rotate(0);
1755
1805
  -ms-transform: rotate(0);
1756
1806
  transform: rotate(0);
1757
- opacity: 1;
1807
+ -webkit-transform-origin: left bottom;
1808
+ -ms-transform-origin: left bottom;
1809
+ transform-origin: left bottom;
1758
1810
  }
1759
1811
  }
1760
- .rotateInUpLeft {
1761
- -webkit-animation-name: rotateInUpLeft;
1762
- animation-name: rotateInUpLeft;
1812
+ .animated-rotate-in-up-left {
1813
+ -webkit-animation-name: animated-rotate-in-up-left;
1814
+ -ms-animation-name: animated-rotate-in-up-left;
1815
+ animation-name: animated-rotate-in-up-left;
1763
1816
  }
1764
- @-webkit-keyframes rotateInUpRight {
1817
+ @-webkit-keyframes animated-rotate-in-up-right {
1765
1818
  0% {
1766
- -webkit-transform-origin: right bottom;
1767
- transform-origin: right bottom;
1819
+ opacity: 0;
1768
1820
  -webkit-transform: rotate(-90deg);
1769
1821
  transform: rotate(-90deg);
1770
- opacity: 0;
1822
+ -webkit-transform-origin: right bottom;
1823
+ transform-origin: right bottom;
1771
1824
  }
1772
1825
  100% {
1773
- -webkit-transform-origin: right bottom;
1774
- transform-origin: right bottom;
1826
+ opacity: 1;
1775
1827
  -webkit-transform: rotate(0);
1776
1828
  transform: rotate(0);
1777
- opacity: 1;
1829
+ -webkit-transform-origin: right bottom;
1830
+ transform-origin: right bottom;
1778
1831
  }
1779
1832
  }
1780
- @keyframes rotateInUpRight {
1833
+ @keyframes animated-rotate-in-up-right {
1781
1834
  0% {
1782
- -webkit-transform-origin: right bottom;
1783
- -ms-transform-origin: right bottom;
1784
- transform-origin: right bottom;
1835
+ opacity: 0;
1785
1836
  -webkit-transform: rotate(-90deg);
1786
1837
  -ms-transform: rotate(-90deg);
1787
1838
  transform: rotate(-90deg);
1788
- opacity: 0;
1839
+ -webkit-transform-origin: right bottom;
1840
+ -ms-transform-origin: right bottom;
1841
+ transform-origin: right bottom;
1789
1842
  }
1790
1843
  100% {
1791
- -webkit-transform-origin: right bottom;
1792
- -ms-transform-origin: right bottom;
1793
- transform-origin: right bottom;
1844
+ opacity: 1;
1794
1845
  -webkit-transform: rotate(0);
1795
1846
  -ms-transform: rotate(0);
1796
1847
  transform: rotate(0);
1797
- opacity: 1;
1848
+ -webkit-transform-origin: right bottom;
1849
+ -ms-transform-origin: right bottom;
1850
+ transform-origin: right bottom;
1798
1851
  }
1799
1852
  }
1800
- .rotateInUpRight {
1801
- -webkit-animation-name: rotateInUpRight;
1802
- animation-name: rotateInUpRight;
1853
+ .animated-rotate-in-up-right {
1854
+ -webkit-animation-name: animated-rotate-in-up-right;
1855
+ -ms-animation-name: animated-rotate-in-up-right;
1856
+ animation-name: animated-rotate-in-up-right;
1803
1857
  }
1804
- @-webkit-keyframes rotateOut {
1858
+ @-webkit-keyframes animated-rotate-out {
1805
1859
  0% {
1806
- -webkit-transform-origin: center center;
1807
- transform-origin: center center;
1860
+ opacity: 1;
1808
1861
  -webkit-transform: rotate(0);
1809
1862
  transform: rotate(0);
1810
- opacity: 1;
1863
+ -webkit-transform-origin: center center;
1864
+ transform-origin: center center;
1811
1865
  }
1812
1866
  100% {
1813
- -webkit-transform-origin: center center;
1814
- transform-origin: center center;
1867
+ opacity: 0;
1815
1868
  -webkit-transform: rotate(200deg);
1816
1869
  transform: rotate(200deg);
1817
- opacity: 0;
1870
+ -webkit-transform-origin: center center;
1871
+ transform-origin: center center;
1818
1872
  }
1819
1873
  }
1820
- @keyframes rotateOut {
1874
+ @keyframes animated-rotate-out {
1821
1875
  0% {
1822
- -webkit-transform-origin: center center;
1823
- -ms-transform-origin: center center;
1824
- transform-origin: center center;
1876
+ opacity: 1;
1825
1877
  -webkit-transform: rotate(0);
1826
1878
  -ms-transform: rotate(0);
1827
1879
  transform: rotate(0);
1828
- opacity: 1;
1880
+ -webkit-transform-origin: center center;
1881
+ -ms-transform-origin: center center;
1882
+ transform-origin: center center;
1829
1883
  }
1830
1884
  100% {
1831
- -webkit-transform-origin: center center;
1832
- -ms-transform-origin: center center;
1833
- transform-origin: center center;
1885
+ opacity: 0;
1834
1886
  -webkit-transform: rotate(200deg);
1835
1887
  -ms-transform: rotate(200deg);
1836
1888
  transform: rotate(200deg);
1837
- opacity: 0;
1889
+ -webkit-transform-origin: center center;
1890
+ -ms-transform-origin: center center;
1891
+ transform-origin: center center;
1838
1892
  }
1839
1893
  }
1840
- .rotateOut {
1841
- -webkit-animation-name: rotateOut;
1842
- animation-name: rotateOut;
1894
+ .animated-rotate-out {
1895
+ -webkit-animation-name: animated-rotate-out;
1896
+ -ms-animation-name: animated-rotate-out;
1897
+ animation-name: animated-rotate-out;
1843
1898
  }
1844
- @-webkit-keyframes rotateOutDownLeft {
1899
+ @-webkit-keyframes animated-rotate-out-down-left {
1845
1900
  0% {
1846
- -webkit-transform-origin: left bottom;
1847
- transform-origin: left bottom;
1901
+ opacity: 1;
1848
1902
  -webkit-transform: rotate(0);
1849
1903
  transform: rotate(0);
1850
- opacity: 1;
1904
+ -webkit-transform-origin: left bottom;
1905
+ transform-origin: left bottom;
1851
1906
  }
1852
1907
  100% {
1853
- -webkit-transform-origin: left bottom;
1854
- transform-origin: left bottom;
1908
+ opacity: 0;
1855
1909
  -webkit-transform: rotate(90deg);
1856
1910
  transform: rotate(90deg);
1857
- opacity: 0;
1911
+ -webkit-transform-origin: left bottom;
1912
+ transform-origin: left bottom;
1858
1913
  }
1859
1914
  }
1860
- @keyframes rotateOutDownLeft {
1915
+ @keyframes animated-rotate-out-down-left {
1861
1916
  0% {
1862
- -webkit-transform-origin: left bottom;
1863
- -ms-transform-origin: left bottom;
1864
- transform-origin: left bottom;
1917
+ opacity: 1;
1865
1918
  -webkit-transform: rotate(0);
1866
1919
  -ms-transform: rotate(0);
1867
1920
  transform: rotate(0);
1868
- opacity: 1;
1921
+ -webkit-transform-origin: left bottom;
1922
+ -ms-transform-origin: left bottom;
1923
+ transform-origin: left bottom;
1869
1924
  }
1870
1925
  100% {
1871
- -webkit-transform-origin: left bottom;
1872
- -ms-transform-origin: left bottom;
1873
- transform-origin: left bottom;
1926
+ opacity: 0;
1874
1927
  -webkit-transform: rotate(90deg);
1875
1928
  -ms-transform: rotate(90deg);
1876
1929
  transform: rotate(90deg);
1877
- opacity: 0;
1930
+ -webkit-transform-origin: left bottom;
1931
+ -ms-transform-origin: left bottom;
1932
+ transform-origin: left bottom;
1878
1933
  }
1879
1934
  }
1880
- .rotateOutDownLeft {
1881
- -webkit-animation-name: rotateOutDownLeft;
1882
- animation-name: rotateOutDownLeft;
1935
+ .animated-rotate-out-down-left {
1936
+ -webkit-animation-name: animated-rotate-out-down-left;
1937
+ -ms-animation-name: animated-rotate-out-down-left;
1938
+ animation-name: animated-rotate-out-down-left;
1883
1939
  }
1884
- @-webkit-keyframes rotateOutDownRight {
1940
+ @-webkit-keyframes animated-rotate-out-down-right {
1885
1941
  0% {
1886
- -webkit-transform-origin: right bottom;
1887
- transform-origin: right bottom;
1942
+ opacity: 1;
1888
1943
  -webkit-transform: rotate(0);
1889
1944
  transform: rotate(0);
1890
- opacity: 1;
1945
+ -webkit-transform-origin: right bottom;
1946
+ transform-origin: right bottom;
1891
1947
  }
1892
1948
  100% {
1893
- -webkit-transform-origin: right bottom;
1894
- transform-origin: right bottom;
1949
+ opacity: 0;
1895
1950
  -webkit-transform: rotate(-90deg);
1896
1951
  transform: rotate(-90deg);
1897
- opacity: 0;
1952
+ -webkit-transform-origin: right bottom;
1953
+ transform-origin: right bottom;
1898
1954
  }
1899
1955
  }
1900
- @keyframes rotateOutDownRight {
1956
+ @keyframes animated-rotate-out-down-right {
1901
1957
  0% {
1902
- -webkit-transform-origin: right bottom;
1903
- -ms-transform-origin: right bottom;
1904
- transform-origin: right bottom;
1958
+ opacity: 1;
1905
1959
  -webkit-transform: rotate(0);
1906
1960
  -ms-transform: rotate(0);
1907
1961
  transform: rotate(0);
1908
- opacity: 1;
1962
+ -webkit-transform-origin: right bottom;
1963
+ -ms-transform-origin: right bottom;
1964
+ transform-origin: right bottom;
1909
1965
  }
1910
1966
  100% {
1911
- -webkit-transform-origin: right bottom;
1912
- -ms-transform-origin: right bottom;
1913
- transform-origin: right bottom;
1967
+ opacity: 0;
1914
1968
  -webkit-transform: rotate(-90deg);
1915
1969
  -ms-transform: rotate(-90deg);
1916
1970
  transform: rotate(-90deg);
1917
- opacity: 0;
1971
+ -webkit-transform-origin: right bottom;
1972
+ -ms-transform-origin: right bottom;
1973
+ transform-origin: right bottom;
1918
1974
  }
1919
1975
  }
1920
- .rotateOutDownRight {
1921
- -webkit-animation-name: rotateOutDownRight;
1922
- animation-name: rotateOutDownRight;
1976
+ .rotate-out-down-right {
1977
+ -webkit-animation-name: animated-rotate-out-down-right;
1978
+ -ms-animation-name: animated-rotate-out-down-right;
1979
+ animation-name: animated-rotate-out-down-right;
1923
1980
  }
1924
- @-webkit-keyframes rotateOutUpLeft {
1981
+ @-webkit-keyframes animated-rotate-out-up-left {
1925
1982
  0% {
1926
- -webkit-transform-origin: left bottom;
1927
- transform-origin: left bottom;
1983
+ opacity: 1;
1928
1984
  -webkit-transform: rotate(0);
1929
1985
  transform: rotate(0);
1930
- opacity: 1;
1986
+ -webkit-transform-origin: left bottom;
1987
+ transform-origin: left bottom;
1931
1988
  }
1932
1989
  100% {
1933
- -webkit-transform-origin: left bottom;
1934
- transform-origin: left bottom;
1990
+ opacity: 0;
1935
1991
  -webkit-transform: rotate(-90deg);
1936
1992
  transform: rotate(-90deg);
1937
- opacity: 0;
1993
+ -webkit-transform-origin: left bottom;
1994
+ transform-origin: left bottom;
1938
1995
  }
1939
1996
  }
1940
- @keyframes rotateOutUpLeft {
1997
+ @keyframes animated-rotate-out-up-left {
1941
1998
  0% {
1942
- -webkit-transform-origin: left bottom;
1943
- -ms-transform-origin: left bottom;
1944
- transform-origin: left bottom;
1999
+ opacity: 1;
1945
2000
  -webkit-transform: rotate(0);
1946
2001
  -ms-transform: rotate(0);
1947
2002
  transform: rotate(0);
1948
- opacity: 1;
2003
+ -webkit-transform-origin: left bottom;
2004
+ -ms-transform-origin: left bottom;
2005
+ transform-origin: left bottom;
1949
2006
  }
1950
2007
  100% {
1951
- -webkit-transform-origin: left bottom;
1952
- -ms-transform-origin: left bottom;
1953
- transform-origin: left bottom;
2008
+ opacity: 0;
1954
2009
  -webkit-transform: rotate(-90deg);
1955
2010
  -ms-transform: rotate(-90deg);
1956
2011
  transform: rotate(-90deg);
1957
- opacity: 0;
2012
+ -webkit-transform-origin: left bottom;
2013
+ -ms-transform-origin: left bottom;
2014
+ transform-origin: left bottom;
1958
2015
  }
1959
2016
  }
1960
- .rotateOutUpLeft {
1961
- -webkit-animation-name: rotateOutUpLeft;
1962
- animation-name: rotateOutUpLeft;
2017
+ .animated-rotate-out-up-left {
2018
+ -webkit-animation-name: animated-rotate-out-up-left;
2019
+ -ms-animation-name: animated-rotate-out-up-left;
2020
+ animation-name: animated-rotate-out-up-left;
1963
2021
  }
1964
- @-webkit-keyframes rotateOutUpRight {
2022
+ @-webkit-keyframes animated-rotate-out-up-right {
1965
2023
  0% {
1966
2024
  -webkit-transform-origin: right bottom;
1967
2025
  transform-origin: right bottom;
@@ -1977,31 +2035,32 @@
1977
2035
  opacity: 0;
1978
2036
  }
1979
2037
  }
1980
- @keyframes rotateOutUpRight {
2038
+ @keyframes animated-rotate-out-up-right {
1981
2039
  0% {
1982
- -webkit-transform-origin: right bottom;
1983
- -ms-transform-origin: right bottom;
1984
- transform-origin: right bottom;
2040
+ opacity: 1;
1985
2041
  -webkit-transform: rotate(0);
1986
2042
  -ms-transform: rotate(0);
1987
2043
  transform: rotate(0);
1988
- opacity: 1;
2044
+ -webkit-transform-origin: right bottom;
2045
+ -ms-transform-origin: right bottom;
2046
+ transform-origin: right bottom;
1989
2047
  }
1990
2048
  100% {
1991
- -webkit-transform-origin: right bottom;
1992
- -ms-transform-origin: right bottom;
1993
- transform-origin: right bottom;
2049
+ opacity: 0;
1994
2050
  -webkit-transform: rotate(90deg);
1995
2051
  -ms-transform: rotate(90deg);
1996
2052
  transform: rotate(90deg);
1997
- opacity: 0;
2053
+ -webkit-transform-origin: right bottom;
2054
+ -ms-transform-origin: right bottom;
2055
+ transform-origin: right bottom;
1998
2056
  }
1999
2057
  }
2000
- .rotateOutUpRight {
2001
- -webkit-animation-name: rotateOutUpRight;
2002
- animation-name: rotateOutUpRight;
2058
+ .rotate-out-up-right {
2059
+ -webkit-animation-name: animated-rotate-out-up-right;
2060
+ -ms-animation-name: animated-rotate-out-up-right;
2061
+ animation-name: animated-rotate-out-up-right;
2003
2062
  }
2004
- @-webkit-keyframes slideInDown {
2063
+ @-webkit-keyframes animated-slide-in-down {
2005
2064
  0% {
2006
2065
  opacity: 0;
2007
2066
  -webkit-transform: translateY(-2000px);
@@ -2012,7 +2071,7 @@
2012
2071
  transform: translateY(0);
2013
2072
  }
2014
2073
  }
2015
- @keyframes slideInDown {
2074
+ @keyframes animated-slide-in-down {
2016
2075
  0% {
2017
2076
  opacity: 0;
2018
2077
  -webkit-transform: translateY(-2000px);
@@ -2025,11 +2084,12 @@
2025
2084
  transform: translateY(0);
2026
2085
  }
2027
2086
  }
2028
- .slideInDown {
2029
- -webkit-animation-name: slideInDown;
2030
- animation-name: slideInDown;
2087
+ .animated-slide-in-down {
2088
+ -webkit-animation-name: animated-slide-in-down;
2089
+ -ms-animation-name: animated-slide-in-down;
2090
+ animation-name: animated-slide-in-down;
2031
2091
  }
2032
- @-webkit-keyframes slideInLeft {
2092
+ @-webkit-keyframes animated-slide-in-left {
2033
2093
  0% {
2034
2094
  opacity: 0;
2035
2095
  -webkit-transform: translateX(-2000px);
@@ -2040,7 +2100,7 @@
2040
2100
  transform: translateX(0);
2041
2101
  }
2042
2102
  }
2043
- @keyframes slideInLeft {
2103
+ @keyframes animated-slide-in-left {
2044
2104
  0% {
2045
2105
  opacity: 0;
2046
2106
  -webkit-transform: translateX(-2000px);
@@ -2053,11 +2113,12 @@
2053
2113
  transform: translateX(0);
2054
2114
  }
2055
2115
  }
2056
- .slideInLeft {
2057
- -webkit-animation-name: slideInLeft;
2058
- animation-name: slideInLeft;
2116
+ .animated-slide-in-left {
2117
+ -webkit-animation-name: animated-slide-in-left;
2118
+ -ms-animation-name: animated-slide-in-left;
2119
+ animation-name: animated-slide-in-left;
2059
2120
  }
2060
- @-webkit-keyframes slideInRight {
2121
+ @-webkit-keyframes animated-slide-in-right {
2061
2122
  0% {
2062
2123
  opacity: 0;
2063
2124
  -webkit-transform: translateX(2000px);
@@ -2068,7 +2129,7 @@
2068
2129
  transform: translateX(0);
2069
2130
  }
2070
2131
  }
2071
- @keyframes slideInRight {
2132
+ @keyframes animated-slide-in-right {
2072
2133
  0% {
2073
2134
  opacity: 0;
2074
2135
  -webkit-transform: translateX(2000px);
@@ -2081,11 +2142,12 @@
2081
2142
  transform: translateX(0);
2082
2143
  }
2083
2144
  }
2084
- .slideInRight {
2085
- -webkit-animation-name: slideInRight;
2086
- animation-name: slideInRight;
2145
+ .animated-slide-in-right {
2146
+ -webkit-animation-name: animated-slide-in-right;
2147
+ -ms-animation-name: animated-slide-in-right;
2148
+ animation-name: animated-slide-in-right;
2087
2149
  }
2088
- @-webkit-keyframes slideOutLeft {
2150
+ @-webkit-keyframes animated-slide-out-left {
2089
2151
  0% {
2090
2152
  -webkit-transform: translateX(0);
2091
2153
  transform: translateX(0);
@@ -2096,7 +2158,7 @@
2096
2158
  transform: translateX(-2000px);
2097
2159
  }
2098
2160
  }
2099
- @keyframes slideOutLeft {
2161
+ @keyframes animated-slide-out-left {
2100
2162
  0% {
2101
2163
  -webkit-transform: translateX(0);
2102
2164
  -ms-transform: translateX(0);
@@ -2109,11 +2171,12 @@
2109
2171
  transform: translateX(-2000px);
2110
2172
  }
2111
2173
  }
2112
- .slideOutLeft {
2113
- -webkit-animation-name: slideOutLeft;
2114
- animation-name: slideOutLeft;
2174
+ .animated-slide-out-left {
2175
+ -webkit-animation-name: animated-slide-out-left;
2176
+ -ms-animation-name: animated-slide-out-left;
2177
+ animation-name: animated-slide-out-left;
2115
2178
  }
2116
- @-webkit-keyframes slideOutRight {
2179
+ @-webkit-keyframes animated-slide-out-right {
2117
2180
  0% {
2118
2181
  -webkit-transform: translateX(0);
2119
2182
  transform: translateX(0);
@@ -2124,7 +2187,7 @@
2124
2187
  transform: translateX(2000px);
2125
2188
  }
2126
2189
  }
2127
- @keyframes slideOutRight {
2190
+ @keyframes animated-slide-out-right {
2128
2191
  0% {
2129
2192
  -webkit-transform: translateX(0);
2130
2193
  -ms-transform: translateX(0);
@@ -2137,11 +2200,12 @@
2137
2200
  transform: translateX(2000px);
2138
2201
  }
2139
2202
  }
2140
- .slideOutRight {
2141
- -webkit-animation-name: slideOutRight;
2142
- animation-name: slideOutRight;
2203
+ .animated-slide-out-right {
2204
+ -webkit-animation-name: animated-slide-out-right;
2205
+ -ms-animation-name: animated-slide-out-right;
2206
+ animation-name: animated-slide-out-right;
2143
2207
  }
2144
- @-webkit-keyframes slideOutUp {
2208
+ @-webkit-keyframes animated-slide-out-up {
2145
2209
  0% {
2146
2210
  -webkit-transform: translateY(0);
2147
2211
  transform: translateY(0);
@@ -2152,7 +2216,7 @@
2152
2216
  transform: translateY(-2000px);
2153
2217
  }
2154
2218
  }
2155
- @keyframes slideOutUp {
2219
+ @keyframes animated-slide-out-up {
2156
2220
  0% {
2157
2221
  -webkit-transform: translateY(0);
2158
2222
  -ms-transform: translateY(0);
@@ -2165,104 +2229,96 @@
2165
2229
  transform: translateY(-2000px);
2166
2230
  }
2167
2231
  }
2168
- .slideOutUp {
2169
- -webkit-animation-name: slideOutUp;
2170
- animation-name: slideOutUp;
2232
+ .animated-slide-out-up {
2233
+ -webkit-animation-name: animated-slide-out-up;
2234
+ -ms-animation-name: animated-slide-out-up;
2235
+ animation-name: animated-slide-out-up;
2171
2236
  }
2172
- @-webkit-keyframes hinge {
2237
+ @-webkit-keyframes animated-hinge {
2173
2238
  0% {
2174
2239
  -webkit-transform: rotate(0);
2175
2240
  transform: rotate(0);
2176
2241
  -webkit-transform-origin: top left;
2177
- transform-origin: top left;
2178
- -webkit-animation-timing-function: ease-in-out;
2179
- animation-timing-function: ease-in-out;
2242
+ transform-origin: top left;
2180
2243
  }
2181
2244
  20%, 60% {
2182
2245
  -webkit-transform: rotate(80deg);
2183
2246
  transform: rotate(80deg);
2184
2247
  -webkit-transform-origin: top left;
2185
- transform-origin: top left;
2186
- -webkit-animation-timing-function: ease-in-out;
2187
- animation-timing-function: ease-in-out;
2248
+ transform-origin: top left;
2188
2249
  }
2189
2250
  40% {
2190
2251
  -webkit-transform: rotate(60deg);
2191
2252
  transform: rotate(60deg);
2192
2253
  -webkit-transform-origin: top left;
2193
- transform-origin: top left;
2194
- -webkit-animation-timing-function: ease-in-out;
2195
- animation-timing-function: ease-in-out;
2254
+ transform-origin: top left;
2196
2255
  }
2197
2256
  80% {
2257
+ opacity: 1;
2198
2258
  -webkit-transform: rotate(60deg) translateY(0);
2199
2259
  transform: rotate(60deg) translateY(0);
2200
- opacity: 1;
2201
2260
  -webkit-transform-origin: top left;
2202
- transform-origin: top left;
2203
- -webkit-animation-timing-function: ease-in-out;
2204
- animation-timing-function: ease-in-out;
2261
+ transform-origin: top left;
2205
2262
  }
2206
2263
  100% {
2264
+ opacity: 0;
2207
2265
  -webkit-transform: translateY(700px);
2208
2266
  transform: translateY(700px);
2209
- opacity: 0;
2210
2267
  }
2211
2268
  }
2212
- @keyframes hinge {
2269
+ @keyframes animated-hinge {
2213
2270
  0% {
2214
2271
  -webkit-transform: rotate(0);
2215
2272
  -ms-transform: rotate(0);
2216
2273
  transform: rotate(0);
2217
2274
  -webkit-transform-origin: top left;
2218
- -ms-transform-origin: top left;
2219
- transform-origin: top left;
2220
- -webkit-animation-timing-function: ease-in-out;
2221
- animation-timing-function: ease-in-out;
2275
+ -ms-transform-origin: top left;
2276
+ transform-origin: top left;
2222
2277
  }
2223
2278
  20%, 60% {
2224
2279
  -webkit-transform: rotate(80deg);
2225
2280
  -ms-transform: rotate(80deg);
2226
2281
  transform: rotate(80deg);
2227
2282
  -webkit-transform-origin: top left;
2228
- -ms-transform-origin: top left;
2229
- transform-origin: top left;
2230
- -webkit-animation-timing-function: ease-in-out;
2231
- animation-timing-function: ease-in-out;
2283
+ -ms-transform-origin: top left;
2284
+ transform-origin: top left;
2232
2285
  }
2233
2286
  40% {
2234
2287
  -webkit-transform: rotate(60deg);
2235
2288
  -ms-transform: rotate(60deg);
2236
2289
  transform: rotate(60deg);
2237
2290
  -webkit-transform-origin: top left;
2238
- -ms-transform-origin: top left;
2239
- transform-origin: top left;
2240
- -webkit-animation-timing-function: ease-in-out;
2241
- animation-timing-function: ease-in-out;
2291
+ -ms-transform-origin: top left;
2292
+ transform-origin: top left;
2242
2293
  }
2243
2294
  80% {
2295
+ opacity: 1;
2244
2296
  -webkit-transform: rotate(60deg) translateY(0);
2245
2297
  -ms-transform: rotate(60deg) translateY(0);
2246
2298
  transform: rotate(60deg) translateY(0);
2247
- opacity: 1;
2248
2299
  -webkit-transform-origin: top left;
2249
- -ms-transform-origin: top left;
2250
- transform-origin: top left;
2251
- -webkit-animation-timing-function: ease-in-out;
2252
- animation-timing-function: ease-in-out;
2300
+ -ms-transform-origin: top left;
2301
+ transform-origin: top left;
2253
2302
  }
2254
2303
  100% {
2304
+ opacity: 0;
2255
2305
  -webkit-transform: translateY(700px);
2256
2306
  -ms-transform: translateY(700px);
2257
2307
  transform: translateY(700px);
2258
- opacity: 0;
2259
2308
  }
2260
2309
  }
2261
- .hinge {
2262
- -webkit-animation-name: hinge;
2263
- animation-name: hinge;
2310
+ .animated-hinge {
2311
+ -webkit-animation-duration: 2s;
2312
+ -ms-animation-duration: 2s;
2313
+ animation-duration: 2s;
2314
+ -webkit-animation-name: animated-hinge;
2315
+ -ms-animation-name: animated-hinge;
2316
+ animation-name: animated-hinge;
2317
+ -webkit-animation-timing-function: ease-in-out;
2318
+ -ms-animation-timing-function: ease-in-out;
2319
+ animation-timing-function: ease-in-out;
2264
2320
  }
2265
- @-webkit-keyframes rollIn {
2321
+ @-webkit-keyframes animated-roll-in {
2266
2322
  0% {
2267
2323
  opacity: 0;
2268
2324
  -webkit-transform: translateX(-100%) rotate(-120deg);
@@ -2274,7 +2330,7 @@
2274
2330
  transform: translateX(0px) rotate(0deg);
2275
2331
  }
2276
2332
  }
2277
- @keyframes rollIn {
2333
+ @keyframes animated-roll-in {
2278
2334
  0% {
2279
2335
  opacity: 0;
2280
2336
  -webkit-transform: translateX(-100%) rotate(-120deg);
@@ -2288,11 +2344,12 @@
2288
2344
  transform: translateX(0px) rotate(0deg);
2289
2345
  }
2290
2346
  }
2291
- .rollIn {
2292
- -webkit-animation-name: rollIn;
2293
- animation-name: rollIn;
2347
+ .animated-roll-in {
2348
+ -webkit-animation-name: animated-roll-in;
2349
+ -ms-animation-name: animated-roll-in;
2350
+ animation-name: animated-roll-in;
2294
2351
  }
2295
- @-webkit-keyframes rollOut {
2352
+ @-webkit-keyframes animated-roll-out {
2296
2353
  0% {
2297
2354
  opacity: 1;
2298
2355
  -webkit-transform: translateX(0px) rotate(0deg);
@@ -2304,7 +2361,7 @@
2304
2361
  transform: translateX(100%) rotate(120deg);
2305
2362
  }
2306
2363
  }
2307
- @keyframes rollOut {
2364
+ @keyframes animated-roll-out {
2308
2365
  0% {
2309
2366
  opacity: 1;
2310
2367
  -webkit-transform: translateX(0px) rotate(0deg);
@@ -2318,69 +2375,84 @@
2318
2375
  transform: translateX(100%) rotate(120deg);
2319
2376
  }
2320
2377
  }
2321
- .rollOut {
2322
- -webkit-animation-name: rollOut;
2323
- animation-name: rollOut;
2378
+ .animated-roll-out {
2379
+ -webkit-animation-name: animated-roll-out;
2380
+ -ms-animation-name: animated-roll-out;
2381
+ animation-name: animated-roll-out;
2324
2382
  }
2325
2383
 
2326
- /* #Delay
2384
+ /* # Delay
2327
2385
  ================================================== */
2328
2386
  .animated.animated-delay-shortest {
2329
2387
  -webkit-animation-delay: 0.25s;
2330
- animation-delay: 0.25s;
2388
+ -ms-animation-delay: 0.25s;
2389
+ animation-delay: 0.25s;
2331
2390
  }
2332
2391
  .animated.animated-delay-shorter {
2333
2392
  -webkit-animation-delay: 0.5s;
2334
- animation-delay: 0.5s;
2393
+ -ms-animation-delay: 0.5s;
2394
+ animation-delay: 0.5s;
2335
2395
  }
2336
2396
  .animated.animated-delay-short {
2337
2397
  -webkit-animation-delay: 0.75s;
2338
- animation-delay: 0.75s;
2398
+ -ms-animation-delay: 0.75s;
2399
+ animation-delay: 0.75s;
2339
2400
  }
2340
2401
  .animated.animated-delay-default {
2341
2402
  -webkit-animation-delay: 1s;
2342
- animation-delay: 1s;
2403
+ -ms-animation-delay: 1s;
2404
+ animation-delay: 1s;
2343
2405
  }
2344
2406
  .animated.animated-delay-long {
2345
2407
  -webkit-animation-delay: 1.25s;
2346
- animation-delay: 1.25s;
2408
+ -ms-animation-delay: 1.25s;
2409
+ animation-delay: 1.25s;
2347
2410
  }
2348
2411
  .animated.animated-delay-longer {
2349
2412
  -webkit-animation-delay: 1.5s;
2350
- animation-delay: 1.5s;
2413
+ -ms-animation-delay: 1.5s;
2414
+ animation-delay: 1.5s;
2351
2415
  }
2352
2416
  .animated.animated-delay-longest {
2353
2417
  -webkit-animation-delay: 1.75s;
2354
- animation-delay: 1.75s;
2418
+ -ms-animation-delay: 1.75s;
2419
+ animation-delay: 1.75s;
2355
2420
  }
2356
2421
 
2357
- /* #Duration
2422
+ /* # Duration
2358
2423
  ================================================== */
2359
2424
  .animated.animated-duration-fastest {
2360
2425
  -webkit-animation-duration: 0.25s;
2361
- animation-duration: 0.25s;
2426
+ -ms-animation-duration: 0.25s;
2427
+ animation-duration: 0.25s;
2362
2428
  }
2363
2429
  .animated.animated-duration-faster {
2364
2430
  -webkit-animation-duration: 0.5s;
2365
- animation-duration: 0.5s;
2431
+ -ms-animation-duration: 0.5s;
2432
+ animation-duration: 0.5s;
2366
2433
  }
2367
2434
  .animated.animated-duration-fast {
2368
2435
  -webkit-animation-duration: 0.75s;
2369
- animation-duration: 0.75s;
2436
+ -ms-animation-duration: 0.75s;
2437
+ animation-duration: 0.75s;
2370
2438
  }
2371
2439
  .animated.animated-duration-default {
2372
2440
  -webkit-animation-duration: 1s;
2373
- animation-duration: 1s;
2441
+ -ms-animation-duration: 1s;
2442
+ animation-duration: 1s;
2374
2443
  }
2375
2444
  .animated.animated-duration-slow {
2376
2445
  -webkit-animation-duration: 1.25s;
2377
- animation-duration: 1.25s;
2446
+ -ms-animation-duration: 1.25s;
2447
+ animation-duration: 1.25s;
2378
2448
  }
2379
2449
  .animated.animated-duration-slower {
2380
2450
  -webkit-animation-duration: 1.5s;
2381
- animation-duration: 1.5s;
2451
+ -ms-animation-duration: 1.5s;
2452
+ animation-duration: 1.5s;
2382
2453
  }
2383
2454
  .animated.animated-duration-slowest {
2384
2455
  -webkit-animation-duration: 1.75s;
2385
- animation-duration: 1.75s;
2456
+ -ms-animation-duration: 1.75s;
2457
+ animation-duration: 1.75s;
2386
2458
  }