CoCalc -- animsition.css

GitHub Repository: bhikandeshmukh/shark
Path: blob/master/phs/tiktok/vendor/animsition/css/animsition.css
⁹⁹⁶ views
1
/*!
2
 * animsition v4.0.2
3
 * A simple and easy jQuery plugin for CSS animated page transitions.
4
 * http://blivesta.github.io/animsition
5
 * License : MIT
6
 * Author : blivesta (http://blivesta.com/)
7
 */
8
.animsition,
9
.animsition-overlay {
10
  position: relative;
11
  opacity: 0;
12
  -webkit-animation-fill-mode: both;
13
          animation-fill-mode: both;
14
}
15

16
/**
17
 * overlay option
18
 */
19
.animsition-overlay-slide {
20
  position: fixed;
21
  z-index: 1;
22
  width: 100%;
23
  height: 100%;
24
  background-color: #ddd;
25
}
26
/* loading option */
27
.animsition-loading,
28
.animsition-loading:after {
29
  width: 32px;
30
  height: 32px;
31
  position: fixed;
32
  top: 50%;
33
  left: 50%;
34
  margin-top: -16px;
35
  margin-left: -16px;
36
  border-radius: 50%;
37
  z-index: 100;
38
}
39

40
.animsition-loading {
41
  background-color: transparent;
42
  border-top: 5px solid rgba(0, 0, 0, 0.2);
43
  border-right: 5px solid rgba(0, 0, 0, 0.2);
44
  border-bottom: 5px solid rgba(0, 0, 0, 0.2);
45
  border-left: 5px solid #eee;
46
  -webkit-transform: translateZ(0);
47
          transform: translateZ(0);
48
  -webkit-animation-iteration-count:infinite;
49
          animation-iteration-count:infinite;
50
  -webkit-animation-timing-function: linear;
51
          animation-timing-function: linear;
52
  -webkit-animation-duration: .8s;
53
          animation-duration: .8s;
54
  -webkit-animation-name: animsition-loading;
55
          animation-name: animsition-loading;
56
}
57

58
@-webkit-keyframes animsition-loading {
59
  0% {
60
    -webkit-transform: rotate(0deg);
61
            transform: rotate(0deg);
62
  }
63
  100% {
64
    -webkit-transform: rotate(360deg);
65
            transform: rotate(360deg);
66
  }
67
}
68

69
@keyframes animsition-loading {
70
  0% {
71
    -webkit-transform: rotate(0deg);
72
            transform: rotate(0deg);
73
  }
74
  100% {
75
    -webkit-transform: rotate(360deg);
76
            transform: rotate(360deg);
77
  }
78
}
79

80
@-webkit-keyframes fade-in {
81
  0% {
82
    opacity: 0;
83
  }
84
  100% {
85
    opacity: 1;
86
  }
87
}
88

89
@keyframes fade-in {
90
  0% {
91
    opacity: 0;
92
  }
93
  100% {
94
    opacity: 1;
95
  }
96
}
97

98

99
.fade-in {
100
  -webkit-animation-name: fade-in;
101
          animation-name: fade-in;
102
}
103

104

105
@-webkit-keyframes fade-out {
106
  0% {
107
    opacity: 1;
108
  }
109
  100% {
110
    opacity: 0;
111
  }
112
}
113

114

115
@keyframes fade-out {
116
  0% {
117
    opacity: 1;
118
  }
119
  100% {
120
    opacity: 0;
121
  }
122
}
123

124

125
.fade-out {
126
  -webkit-animation-name: fade-out;
127
          animation-name: fade-out;
128
}
129
@-webkit-keyframes fade-in-up {
130
  0% {
131
    -webkit-transform: translateY(500px);
132
            transform: translateY(500px);
133
    opacity: 0;
134
  }
135
  100% {
136
    -webkit-transform: translateY(0);
137
            transform: translateY(0);
138
    opacity: 1;
139
  }
140
}
141
@keyframes fade-in-up {
142
  0% {
143
    -webkit-transform: translateY(500px);
144
            transform: translateY(500px);
145
    opacity: 0;
146
  }
147
  100% {
148
    -webkit-transform: translateY(0);
149
            transform: translateY(0);
150
    opacity: 1;
151
  }
152
}
153

154

155
.fade-in-up {
156
  -webkit-animation-name: fade-in-up;
157
          animation-name: fade-in-up;
158
}
159

160

161
@-webkit-keyframes fade-out-up {
162
  0% {
163
    -webkit-transform: translateY(0);
164
            transform: translateY(0);
165
    opacity: 1;
166
  }
167
  100% {
168
    -webkit-transform: translateY(-500px);
169
            transform: translateY(-500px);
170
    opacity: 0;
171
  }
172
}
173

174

175
@keyframes fade-out-up {
176
  0% {
177
    -webkit-transform: translateY(0);
178
            transform: translateY(0);
179
    opacity: 1;
180
  }
181
  100% {
182
    -webkit-transform: translateY(-500px);
183
            transform: translateY(-500px);
184
    opacity: 0;
185
  }
186
}
187

188

189
.fade-out-up {
190
  -webkit-animation-name: fade-out-up;
191
          animation-name: fade-out-up;
192
}
193
@-webkit-keyframes fade-in-up-sm {
194
  0% {
195
    -webkit-transform: translateY(100px);
196
            transform: translateY(100px);
197
    opacity: 0;
198
  }
199
  100% {
200
    -webkit-transform: translateY(0);
201
            transform: translateY(0);
202
    opacity: 1;
203
  }
204
}
205
@keyframes fade-in-up-sm {
206
  0% {
207
    -webkit-transform: translateY(100px);
208
            transform: translateY(100px);
209
    opacity: 0;
210
  }
211
  100% {
212
    -webkit-transform: translateY(0);
213
            transform: translateY(0);
214
    opacity: 1;
215
  }
216
}
217

218

219
.fade-in-up-sm {
220
  -webkit-animation-name: fade-in-up-sm;
221
          animation-name: fade-in-up-sm;
222
}
223

224

225
@-webkit-keyframes fade-out-up-sm {
226
  0% {
227
    -webkit-transform: translateY(0);
228
            transform: translateY(0);
229
    opacity: 1;
230
  }
231
  100% {
232
    -webkit-transform: translateY(-100px);
233
            transform: translateY(-100px);
234
    opacity: 0;
235
  }
236
}
237

238

239
@keyframes fade-out-up-sm {
240
  0% {
241
    -webkit-transform: translateY(0);
242
            transform: translateY(0);
243
    opacity: 1;
244
  }
245
  100% {
246
    -webkit-transform: translateY(-100px);
247
            transform: translateY(-100px);
248
    opacity: 0;
249
  }
250
}
251

252

253
.fade-out-up-sm {
254
  -webkit-animation-name: fade-out-up-sm;
255
          animation-name: fade-out-up-sm;
256
}
257
@-webkit-keyframes fade-in-up-lg {
258
  0% {
259
    -webkit-transform: translateY(1000px);
260
            transform: translateY(1000px);
261
    opacity: 0;
262
  }
263
  100% {
264
    -webkit-transform: translateY(0);
265
            transform: translateY(0);
266
    opacity: 1;
267
  }
268
}
269
@keyframes fade-in-up-lg {
270
  0% {
271
    -webkit-transform: translateY(1000px);
272
            transform: translateY(1000px);
273
    opacity: 0;
274
  }
275
  100% {
276
    -webkit-transform: translateY(0);
277
            transform: translateY(0);
278
    opacity: 1;
279
  }
280
}
281

282

283
.fade-in-up-lg {
284
  -webkit-animation-name: fade-in-up-lg;
285
          animation-name: fade-in-up-lg;
286
}
287

288

289
@-webkit-keyframes fade-out-up-lg {
290
  0% {
291
    -webkit-transform: translateY(0);
292
            transform: translateY(0);
293
    opacity: 1;
294
  }
295
  100% {
296
    -webkit-transform: translateY(-1000px);
297
            transform: translateY(-1000px);
298
    opacity: 0;
299
  }
300
}
301

302

303
@keyframes fade-out-up-lg {
304
  0% {
305
    -webkit-transform: translateY(0);
306
            transform: translateY(0);
307
    opacity: 1;
308
  }
309
  100% {
310
    -webkit-transform: translateY(-1000px);
311
            transform: translateY(-1000px);
312
    opacity: 0;
313
  }
314
}
315

316

317
.fade-out-up-lg {
318
  -webkit-animation-name: fade-out-up-lg;
319
          animation-name: fade-out-up-lg;
320
}
321
@-webkit-keyframes fade-in-down {
322
  0% {
323
    -webkit-transform: translateY(-500px);
324
            transform: translateY(-500px);
325
    opacity: 0;
326
  }
327
  100% {
328
    -webkit-transform: translateY(0);
329
            transform: translateY(0);
330
    opacity: 1;
331
  }
332
}
333
@keyframes fade-in-down {
334
  0% {
335
    -webkit-transform: translateY(-500px);
336
            transform: translateY(-500px);
337
    opacity: 0;
338
  }
339
  100% {
340
    -webkit-transform: translateY(0);
341
            transform: translateY(0);
342
    opacity: 1;
343
  }
344
}
345

346

347
.fade-in-down {
348
  -webkit-animation-name: fade-in-down;
349
          animation-name: fade-in-down;
350
}
351

352

353
@-webkit-keyframes fade-out-down {
354
  0% {
355
    -webkit-transform: translateY(0);
356
            transform: translateY(0);
357
    opacity: 1;
358
  }
359
  100% {
360
    -webkit-transform: translateY(500px);
361
            transform: translateY(500px);
362
    opacity: 0;
363
  }
364
}
365

366

367
@keyframes fade-out-down {
368
  0% {
369
    -webkit-transform: translateY(0);
370
            transform: translateY(0);
371
    opacity: 1;
372
  }
373
  100% {
374
    -webkit-transform: translateY(500px);
375
            transform: translateY(500px);
376
    opacity: 0;
377
  }
378
}
379

380

381
.fade-out-down {
382
  -webkit-animation-name: fade-out-down;
383
          animation-name: fade-out-down;
384
}
385
@-webkit-keyframes fade-in-down-sm {
386
  0% {
387
    -webkit-transform: translateY(-100px);
388
            transform: translateY(-100px);
389
    opacity: 0;
390
  }
391
  100% {
392
    -webkit-transform: translateY(0);
393
            transform: translateY(0);
394
    opacity: 1;
395
  }
396
}
397
@keyframes fade-in-down-sm {
398
  0% {
399
    -webkit-transform: translateY(-100px);
400
            transform: translateY(-100px);
401
    opacity: 0;
402
  }
403
  100% {
404
    -webkit-transform: translateY(0);
405
            transform: translateY(0);
406
    opacity: 1;
407
  }
408
}
409

410

411
.fade-in-down-sm {
412
  -webkit-animation-name: fade-in-down-sm;
413
          animation-name: fade-in-down-sm;
414
}
415

416

417
@-webkit-keyframes fade-out-down-sm {
418
  0% {
419
    -webkit-transform: translateY(0);
420
            transform: translateY(0);
421
    opacity: 1;
422
  }
423
  100% {
424
    -webkit-transform: translateY(100px);
425
            transform: translateY(100px);
426
    opacity: 0;
427
  }
428
}
429

430

431
@keyframes fade-out-down-sm {
432
  0% {
433
    -webkit-transform: translateY(0);
434
            transform: translateY(0);
435
    opacity: 1;
436
  }
437
  100% {
438
    -webkit-transform: translateY(100px);
439
            transform: translateY(100px);
440
    opacity: 0;
441
  }
442
}
443

444

445
.fade-out-down-sm {
446
  -webkit-animation-name: fade-out-down-sm;
447
          animation-name: fade-out-down-sm;
448
}
449
@-webkit-keyframes fade-in-down-lg {
450
  0% {
451
    -webkit-transform: translateY(-1000px);
452
            transform: translateY(-1000px);
453
    opacity: 0;
454
  }
455
  100% {
456
    -webkit-transform: translateY(0);
457
            transform: translateY(0);
458
    opacity: 1;
459
  }
460
}
461
@keyframes fade-in-down-lg {
462
  0% {
463
    -webkit-transform: translateY(-1000px);
464
            transform: translateY(-1000px);
465
    opacity: 0;
466
  }
467
  100% {
468
    -webkit-transform: translateY(0);
469
            transform: translateY(0);
470
    opacity: 1;
471
  }
472
}
473

474

475
.fade-in-down-lg {
476
  -webkit-animation-name: fade-in-down;
477
          animation-name: fade-in-down;
478
}
479

480

481
@-webkit-keyframes fade-out-down-lg {
482
  0% {
483
    -webkit-transform: translateY(0);
484
            transform: translateY(0);
485
    opacity: 1;
486
  }
487
  100% {
488
    -webkit-transform: translateY(1000px);
489
            transform: translateY(1000px);
490
    opacity: 0;
491
  }
492
}
493

494

495
@keyframes fade-out-down-lg {
496
  0% {
497
    -webkit-transform: translateY(0);
498
            transform: translateY(0);
499
    opacity: 1;
500
  }
501
  100% {
502
    -webkit-transform: translateY(1000px);
503
            transform: translateY(1000px);
504
    opacity: 0;
505
  }
506
}
507

508

509
.fade-out-down-lg {
510
  -webkit-animation-name: fade-out-down-lg;
511
          animation-name: fade-out-down-lg;
512
}
513
@-webkit-keyframes fade-in-left {
514
  0% {
515
    -webkit-transform: translateX(-500px);
516
            transform: translateX(-500px);
517
    opacity: 0;
518
  }
519
  100% {
520
    -webkit-transform: translateX(0);
521
            transform: translateX(0);
522
    opacity: 1;
523
  }
524
}
525
@keyframes fade-in-left {
526
  0% {
527
    -webkit-transform: translateX(-500px);
528
            transform: translateX(-500px);
529
    opacity: 0;
530
  }
531
  100% {
532
    -webkit-transform: translateX(0);
533
            transform: translateX(0);
534
    opacity: 1;
535
  }
536
}
537

538

539
.fade-in-left {
540
  -webkit-animation-name: fade-in-left;
541
          animation-name: fade-in-left;
542
}
543

544

545
@-webkit-keyframes fade-out-left {
546
  0% {
547
    -webkit-transform: translateX(0);
548
            transform: translateX(0);
549
    opacity: 1;
550
  }
551
  100% {
552
    -webkit-transform: translateX(-500px);
553
            transform: translateX(-500px);
554
    opacity: 0;
555
  }
556
}
557

558

559
@keyframes fade-out-left {
560
  0% {
561
    -webkit-transform: translateX(0);
562
            transform: translateX(0);
563
    opacity: 1;
564
  }
565
  100% {
566
    -webkit-transform: translateX(-500px);
567
            transform: translateX(-500px);
568
    opacity: 0;
569
  }
570
}
571

572

573
.fade-out-left {
574
  -webkit-animation-name: fade-out-left;
575
          animation-name: fade-out-left;
576
}
577
@-webkit-keyframes fade-in-left-sm {
578
  0% {
579
    -webkit-transform: translateX(-100px);
580
            transform: translateX(-100px);
581
    opacity: 0;
582
  }
583
  100% {
584
    -webkit-transform: translateX(0);
585
            transform: translateX(0);
586
    opacity: 1;
587
  }
588
}
589
@keyframes fade-in-left-sm {
590
  0% {
591
    -webkit-transform: translateX(-100px);
592
            transform: translateX(-100px);
593
    opacity: 0;
594
  }
595
  100% {
596
    -webkit-transform: translateX(0);
597
            transform: translateX(0);
598
    opacity: 1;
599
  }
600
}
601

602

603
.fade-in-left-sm {
604
  -webkit-animation-name: fade-in-left-sm;
605
          animation-name: fade-in-left-sm;
606
}
607

608

609
@-webkit-keyframes fade-out-left-sm {
610
  0% {
611
    -webkit-transform: translateX(0);
612
            transform: translateX(0);
613
    opacity: 1;
614
  }
615
  100% {
616
    -webkit-transform: translateX(-100px);
617
            transform: translateX(-100px);
618
    opacity: 0;
619
  }
620
}
621

622

623
@keyframes fade-out-left-sm {
624
  0% {
625
    -webkit-transform: translateX(0);
626
            transform: translateX(0);
627
    opacity: 1;
628
  }
629
  100% {
630
    -webkit-transform: translateX(-100px);
631
            transform: translateX(-100px);
632
    opacity: 0;
633
  }
634
}
635

636

637
.fade-out-left-sm {
638
  -webkit-animation-name: fade-out-left-sm;
639
          animation-name: fade-out-left-sm;
640
}
641
@-webkit-keyframes fade-in-left-lg {
642
  0% {
643
    -webkit-transform: translateX(-1500px);
644
            transform: translateX(-1500px);
645
    opacity: 0;
646
  }
647
  100% {
648
    -webkit-transform: translateX(0);
649
            transform: translateX(0);
650
    opacity: 1;
651
  }
652
}
653
@keyframes fade-in-left-lg {
654
  0% {
655
    -webkit-transform: translateX(-1500px);
656
            transform: translateX(-1500px);
657
    opacity: 0;
658
  }
659
  100% {
660
    -webkit-transform: translateX(0);
661
            transform: translateX(0);
662
    opacity: 1;
663
  }
664
}
665

666

667
.fade-in-left-lg {
668
  -webkit-animation-name: fade-in-left-lg;
669
          animation-name: fade-in-left-lg;
670
}
671

672

673
@-webkit-keyframes fade-out-left-lg {
674
  0% {
675
    -webkit-transform: translateX(0);
676
            transform: translateX(0);
677
    opacity: 1;
678
  }
679
  100% {
680
    -webkit-transform: translateX(-1500px);
681
            transform: translateX(-1500px);
682
    opacity: 0;
683
  }
684
}
685

686

687
@keyframes fade-out-left-lg {
688
  0% {
689
    -webkit-transform: translateX(0);
690
            transform: translateX(0);
691
    opacity: 1;
692
  }
693
  100% {
694
    -webkit-transform: translateX(-1500px);
695
            transform: translateX(-1500px);
696
    opacity: 0;
697
  }
698
}
699

700

701
.fade-out-left-lg {
702
  -webkit-animation-name: fade-out-left-lg;
703
          animation-name: fade-out-left-lg;
704
}
705
@-webkit-keyframes fade-in-right {
706
  0% {
707
    -webkit-transform: translateX(500px);
708
            transform: translateX(500px);
709
    opacity: 0;
710
  }
711
  100% {
712
    -webkit-transform: translateX(0);
713
            transform: translateX(0);
714
    opacity: 1;
715
  }
716
}
717
@keyframes fade-in-right {
718
  0% {
719
    -webkit-transform: translateX(500px);
720
            transform: translateX(500px);
721
    opacity: 0;
722
  }
723
  100% {
724
    -webkit-transform: translateX(0);
725
            transform: translateX(0);
726
    opacity: 1;
727
  }
728
}
729

730

731
.fade-in-right {
732
  -webkit-animation-name: fade-in-right;
733
          animation-name: fade-in-right;
734
}
735

736

737
@-webkit-keyframes fade-out-right {
738
  0% {
739
    -webkit-transform: translateX(0);
740
            transform: translateX(0);
741
    opacity: 1;
742
  }
743
  100% {
744
    -webkit-transform: translateX(500px);
745
            transform: translateX(500px);
746
    opacity: 0;
747
  }
748
}
749

750

751
@keyframes fade-out-right {
752
  0% {
753
    -webkit-transform: translateX(0);
754
            transform: translateX(0);
755
    opacity: 1;
756
  }
757
  100% {
758
    -webkit-transform: translateX(500px);
759
            transform: translateX(500px);
760
    opacity: 0;
761
  }
762
}
763

764

765
.fade-out-right {
766
  -webkit-animation-name: fade-out-right;
767
          animation-name: fade-out-right;
768
}
769
@-webkit-keyframes fade-in-right-sm {
770
  0% {
771
    -webkit-transform: translateX(100px);
772
            transform: translateX(100px);
773
    opacity: 0;
774
  }
775
  100% {
776
    -webkit-transform: translateX(0);
777
            transform: translateX(0);
778
    opacity: 1;
779
  }
780
}
781
@keyframes fade-in-right-sm {
782
  0% {
783
    -webkit-transform: translateX(100px);
784
            transform: translateX(100px);
785
    opacity: 0;
786
  }
787
  100% {
788
    -webkit-transform: translateX(0);
789
            transform: translateX(0);
790
    opacity: 1;
791
  }
792
}
793

794

795
.fade-in-right-sm {
796
  -webkit-animation-name: fade-in-right-sm;
797
          animation-name: fade-in-right-sm;
798
}
799

800

801
@-webkit-keyframes fade-out-right-sm {
802
  0% {
803
    -webkit-transform: translateX(0);
804
            transform: translateX(0);
805
    opacity: 1;
806
  }
807
  100% {
808
    -webkit-transform: translateX(100px);
809
            transform: translateX(100px);
810
    opacity: 0;
811
  }
812
}
813

814

815
@keyframes fade-out-right-sm {
816
  0% {
817
    -webkit-transform: translateX(0);
818
            transform: translateX(0);
819
    opacity: 1;
820
  }
821
  100% {
822
    -webkit-transform: translateX(100px);
823
            transform: translateX(100px);
824
    opacity: 0;
825
  }
826
}
827

828

829
.fade-out-right-sm {
830
  -webkit-animation-name: fade-out-right-sm;
831
          animation-name: fade-out-right-sm;
832
}
833
@-webkit-keyframes fade-in-right-lg {
834
  0% {
835
    -webkit-transform: translateX(1500px);
836
            transform: translateX(1500px);
837
    opacity: 0;
838
  }
839
  100% {
840
    -webkit-transform: translateX(0);
841
            transform: translateX(0);
842
    opacity: 1;
843
  }
844
}
845
@keyframes fade-in-right-lg {
846
  0% {
847
    -webkit-transform: translateX(1500px);
848
            transform: translateX(1500px);
849
    opacity: 0;
850
  }
851
  100% {
852
    -webkit-transform: translateX(0);
853
            transform: translateX(0);
854
    opacity: 1;
855
  }
856
}
857

858

859
.fade-in-right-lg {
860
  -webkit-animation-name: fade-in-right-lg;
861
          animation-name: fade-in-right-lg;
862
}
863

864

865
@-webkit-keyframes fade-out-right-lg {
866
  0% {
867
    -webkit-transform: translateX(0);
868
            transform: translateX(0);
869
    opacity: 1;
870
  }
871
  100% {
872
    -webkit-transform: translateX(1500px);
873
            transform: translateX(1500px);
874
    opacity: 0;
875
  }
876
}
877

878

879
@keyframes fade-out-right-lg {
880
  0% {
881
    -webkit-transform: translateX(0);
882
            transform: translateX(0);
883
    opacity: 1;
884
  }
885
  100% {
886
    -webkit-transform: translateX(1500px);
887
            transform: translateX(1500px);
888
    opacity: 0;
889
  }
890
}
891

892

893
.fade-out-right-lg {
894
  -webkit-animation-name: fade-out-right-lg;
895
          animation-name: fade-out-right-lg;
896
}
897

898
@-webkit-keyframes rotate-in {
899
  0% {
900
    -webkit-transform: rotate(-90deg);
901
            transform: rotate(-90deg);
902
    -webkit-transform-origin: center center;
903
            transform-origin: center center;
904
    opacity: 0;
905
  }
906
  100% {
907
    -webkit-transform: rotate(0);
908
            transform: rotate(0);
909
    -webkit-transform-origin: center center;
910
            transform-origin: center center;
911
    opacity: 1;
912
  }
913
}
914

915
@keyframes rotate-in {
916
  0% {
917
    -webkit-transform: rotate(-90deg);
918
            transform: rotate(-90deg);
919
    -webkit-transform-origin: center center;
920
            transform-origin: center center;
921
    opacity: 0;
922
  }
923
  100% {
924
    -webkit-transform: rotate(0);
925
            transform: rotate(0);
926
    -webkit-transform-origin: center center;
927
            transform-origin: center center;
928
    opacity: 1;
929
  }
930
}
931

932

933
.rotate-in {
934
  -webkit-animation-name: rotate-in;
935
          animation-name: rotate-in;
936
}
937

938

939
@-webkit-keyframes rotate-out {
940
  0% {
941
    -webkit-transform: rotate(0);
942
            transform: rotate(0);
943
    -webkit-transform-origin: center center;
944
            transform-origin: center center;
945
    opacity: 1;
946
  }
947
  100% {
948
    -webkit-transform: rotate(90deg);
949
            transform: rotate(90deg);
950
    -webkit-transform-origin: center center;
951
            transform-origin: center center;
952
    opacity: 0;
953
  }
954
}
955

956

957
@keyframes rotate-out {
958
  0% {
959
    -webkit-transform: rotate(0);
960
            transform: rotate(0);
961
    -webkit-transform-origin: center center;
962
            transform-origin: center center;
963
    opacity: 1;
964
  }
965
  100% {
966
    -webkit-transform: rotate(90deg);
967
            transform: rotate(90deg);
968
    -webkit-transform-origin: center center;
969
            transform-origin: center center;
970
    opacity: 0;
971
  }
972
}
973

974

975
.rotate-out {
976
  -webkit-animation-name: rotate-out;
977
          animation-name: rotate-out;
978
}
979
@-webkit-keyframes rotate-in-sm {
980
  0% {
981
    -webkit-transform: rotate(-45deg);
982
            transform: rotate(-45deg);
983
    -webkit-transform-origin: center center;
984
            transform-origin: center center;
985
    opacity: 0;
986
  }
987
  100% {
988
    -webkit-transform: rotate(0);
989
            transform: rotate(0);
990
    -webkit-transform-origin: center center;
991
            transform-origin: center center;
992
    opacity: 1;
993
  }
994
}
995
@keyframes rotate-in-sm {
996
  0% {
997
    -webkit-transform: rotate(-45deg);
998
            transform: rotate(-45deg);
999
    -webkit-transform-origin: center center;
1000
            transform-origin: center center;
1001
    opacity: 0;
1002
  }
1003
  100% {
1004
    -webkit-transform: rotate(0);
1005
            transform: rotate(0);
1006
    -webkit-transform-origin: center center;
1007
            transform-origin: center center;
1008
    opacity: 1;
1009
  }
1010
}
1011

1012

1013
.rotate-in-sm {
1014
  -webkit-animation-name: rotate-in-sm;
1015
          animation-name: rotate-in-sm;
1016
}
1017

1018

1019
@-webkit-keyframes rotate-out-sm {
1020
  0% {
1021
    -webkit-transform: rotate(0);
1022
            transform: rotate(0);
1023
    -webkit-transform-origin: center center;
1024
            transform-origin: center center;
1025
    opacity: 1;
1026
  }
1027
  100% {
1028
    -webkit-transform: rotate(45deg);
1029
            transform: rotate(45deg);
1030
    -webkit-transform-origin: center center;
1031
            transform-origin: center center;
1032
    opacity: 0;
1033
  }
1034
}
1035

1036

1037
@keyframes rotate-out-sm {
1038
  0% {
1039
    -webkit-transform: rotate(0);
1040
            transform: rotate(0);
1041
    -webkit-transform-origin: center center;
1042
            transform-origin: center center;
1043
    opacity: 1;
1044
  }
1045
  100% {
1046
    -webkit-transform: rotate(45deg);
1047
            transform: rotate(45deg);
1048
    -webkit-transform-origin: center center;
1049
            transform-origin: center center;
1050
    opacity: 0;
1051
  }
1052
}
1053

1054

1055
.rotate-out-sm {
1056
  -webkit-animation-name: rotate-out-sm;
1057
          animation-name: rotate-out-sm;
1058
}
1059
@-webkit-keyframes rotate-in-lg {
1060
  0% {
1061
    -webkit-transform: rotate(-180deg);
1062
            transform: rotate(-180deg);
1063
    -webkit-transform-origin: center center;
1064
            transform-origin: center center;
1065
    opacity: 0;
1066
  }
1067
  100% {
1068
    -webkit-transform: rotate(0);
1069
            transform: rotate(0);
1070
    -webkit-transform-origin: center center;
1071
            transform-origin: center center;
1072
    opacity: 1;
1073
  }
1074
}
1075
@keyframes rotate-in-lg {
1076
  0% {
1077
    -webkit-transform: rotate(-180deg);
1078
            transform: rotate(-180deg);
1079
    -webkit-transform-origin: center center;
1080
            transform-origin: center center;
1081
    opacity: 0;
1082
  }
1083
  100% {
1084
    -webkit-transform: rotate(0);
1085
            transform: rotate(0);
1086
    -webkit-transform-origin: center center;
1087
            transform-origin: center center;
1088
    opacity: 1;
1089
  }
1090
}
1091

1092

1093
.rotate-in-lg {
1094
  -webkit-animation-name: rotate-in-lg;
1095
          animation-name: rotate-in-lg;
1096
}
1097

1098

1099
@-webkit-keyframes rotate-out-lg {
1100
  0% {
1101
    -webkit-transform: rotate(0);
1102
            transform: rotate(0);
1103
    -webkit-transform-origin: center center;
1104
            transform-origin: center center;
1105
    opacity: 1;
1106
  }
1107
  100% {
1108
    -webkit-transform: rotate(180deg);
1109
            transform: rotate(180deg);
1110
    -webkit-transform-origin: center center;
1111
            transform-origin: center center;
1112
    opacity: 0;
1113
  }
1114
}
1115

1116

1117
@keyframes rotate-out-lg {
1118
  0% {
1119
    -webkit-transform: rotate(0);
1120
            transform: rotate(0);
1121
    -webkit-transform-origin: center center;
1122
            transform-origin: center center;
1123
    opacity: 1;
1124
  }
1125
  100% {
1126
    -webkit-transform: rotate(180deg);
1127
            transform: rotate(180deg);
1128
    -webkit-transform-origin: center center;
1129
            transform-origin: center center;
1130
    opacity: 0;
1131
  }
1132
}
1133

1134

1135
.rotate-out-lg {
1136
  -webkit-animation-name: rotate-out-lg;
1137
          animation-name: rotate-out-lg;
1138
}
1139

1140
@-webkit-keyframes flip-in-x {
1141
  0% {
1142
    -webkit-transform: perspective(550px) rotateX(90deg);
1143
            transform: perspective(550px) rotateX(90deg);
1144
    opacity: 0;
1145
  }
1146
  100% {
1147
    -webkit-transform: perspective(550px) rotateX(0deg);
1148
            transform: perspective(550px) rotateX(0deg);
1149
    opacity: 1;
1150
  }
1151
}
1152

1153
@keyframes flip-in-x {
1154
  0% {
1155
    -webkit-transform: perspective(550px) rotateX(90deg);
1156
            transform: perspective(550px) rotateX(90deg);
1157
    opacity: 0;
1158
  }
1159
  100% {
1160
    -webkit-transform: perspective(550px) rotateX(0deg);
1161
            transform: perspective(550px) rotateX(0deg);
1162
    opacity: 1;
1163
  }
1164
}
1165

1166

1167
.flip-in-x {
1168
  -webkit-animation-name: flip-in-x;
1169
          animation-name: flip-in-x;
1170
  -webkit-backface-visibility: visible !important;
1171
          backface-visibility: visible !important;
1172
}
1173

1174

1175
@-webkit-keyframes flip-out-x {
1176
  0% {
1177
    -webkit-transform: perspective(550px) rotateX(0deg);
1178
            transform: perspective(550px) rotateX(0deg);
1179
    opacity: 1;
1180
  }
1181
  100% {
1182
    -webkit-transform: perspective(550px) rotateX(90deg);
1183
            transform: perspective(550px) rotateX(90deg);
1184
    opacity: 0;
1185
  }
1186
}
1187

1188

1189
@keyframes flip-out-x {
1190
  0% {
1191
    -webkit-transform: perspective(550px) rotateX(0deg);
1192
            transform: perspective(550px) rotateX(0deg);
1193
    opacity: 1;
1194
  }
1195
  100% {
1196
    -webkit-transform: perspective(550px) rotateX(90deg);
1197
            transform: perspective(550px) rotateX(90deg);
1198
    opacity: 0;
1199
  }
1200
}
1201

1202

1203
.flip-out-x {
1204
  -webkit-animation-name: flip-out-x;
1205
          animation-name: flip-out-x;
1206
  -webkit-backface-visibility: visible !important;
1207
          backface-visibility: visible !important;
1208
}
1209
@-webkit-keyframes flip-in-x-nr {
1210
  0% {
1211
    -webkit-transform: perspective(100px) rotateX(90deg);
1212
            transform: perspective(100px) rotateX(90deg);
1213
    opacity: 0;
1214
  }
1215
  100% {
1216
    -webkit-transform: perspective(100px) rotateX(0deg);
1217
            transform: perspective(100px) rotateX(0deg);
1218
    opacity: 1;
1219
  }
1220
}
1221
@keyframes flip-in-x-nr {
1222
  0% {
1223
    -webkit-transform: perspective(100px) rotateX(90deg);
1224
            transform: perspective(100px) rotateX(90deg);
1225
    opacity: 0;
1226
  }
1227
  100% {
1228
    -webkit-transform: perspective(100px) rotateX(0deg);
1229
            transform: perspective(100px) rotateX(0deg);
1230
    opacity: 1;
1231
  }
1232
}
1233

1234

1235
.flip-in-x-nr {
1236
  -webkit-animation-name: flip-in-x-nr;
1237
          animation-name: flip-in-x-nr;
1238
  -webkit-backface-visibility: visible !important;
1239
          backface-visibility: visible !important;
1240
}
1241

1242

1243
@-webkit-keyframes flip-out-x-nr {
1244
  0% {
1245
    -webkit-transform: perspective(100px) rotateX(0deg);
1246
            transform: perspective(100px) rotateX(0deg);
1247
    opacity: 1;
1248
  }
1249
  100% {
1250
    -webkit-transform: perspective(100px) rotateX(90deg);
1251
            transform: perspective(100px) rotateX(90deg);
1252
    opacity: 0;
1253
  }
1254
}
1255

1256

1257
@keyframes flip-out-x-nr {
1258
  0% {
1259
    -webkit-transform: perspective(100px) rotateX(0deg);
1260
            transform: perspective(100px) rotateX(0deg);
1261
    opacity: 1;
1262
  }
1263
  100% {
1264
    -webkit-transform: perspective(100px) rotateX(90deg);
1265
            transform: perspective(100px) rotateX(90deg);
1266
    opacity: 0;
1267
  }
1268
}
1269

1270

1271
.flip-out-x-nr {
1272
  -webkit-animation-name: flip-out-x-nr;
1273
          animation-name: flip-out-x-nr;
1274
  -webkit-backface-visibility: visible !important;
1275
          backface-visibility: visible !important;
1276
}
1277
@-webkit-keyframes flip-in-x-fr {
1278
  0% {
1279
    -webkit-transform: perspective(1000px) rotateX(90deg);
1280
            transform: perspective(1000px) rotateX(90deg);
1281
    opacity: 0;
1282
  }
1283
  100% {
1284
    -webkit-transform: perspective(1000px) rotateX(0deg);
1285
            transform: perspective(1000px) rotateX(0deg);
1286
    opacity: 1;
1287
  }
1288
}
1289
@keyframes flip-in-x-fr {
1290
  0% {
1291
    -webkit-transform: perspective(1000px) rotateX(90deg);
1292
            transform: perspective(1000px) rotateX(90deg);
1293
    opacity: 0;
1294
  }
1295
  100% {
1296
    -webkit-transform: perspective(1000px) rotateX(0deg);
1297
            transform: perspective(1000px) rotateX(0deg);
1298
    opacity: 1;
1299
  }
1300
}
1301

1302

1303
.flip-in-x-fr {
1304
  -webkit-animation-name: flip-in-x-fr;
1305
          animation-name: flip-in-x-fr;
1306
  -webkit-backface-visibility: visible !important;
1307
          backface-visibility: visible !important;
1308
}
1309

1310

1311
@-webkit-keyframes flip-out-x-fr {
1312
  0% {
1313
    -webkit-transform: perspective(1000px) rotateX(0deg);
1314
            transform: perspective(1000px) rotateX(0deg);
1315
    opacity: 1;
1316
  }
1317
  100% {
1318
    -webkit-transform: perspective(1000px) rotateX(90deg);
1319
            transform: perspective(1000px) rotateX(90deg);
1320
    opacity: 0;
1321
  }
1322
}
1323

1324

1325
@keyframes flip-out-x-fr {
1326
  0% {
1327
    -webkit-transform: perspective(1000px) rotateX(0deg);
1328
            transform: perspective(1000px) rotateX(0deg);
1329
    opacity: 1;
1330
  }
1331
  100% {
1332
    -webkit-transform: perspective(1000px) rotateX(90deg);
1333
            transform: perspective(1000px) rotateX(90deg);
1334
    opacity: 0;
1335
  }
1336
}
1337

1338

1339
.flip-out-x-fr {
1340
  -webkit-animation-name: flip-out-x-fr;
1341
          animation-name: flip-out-x-fr;
1342
  -webkit-backface-visibility: visible !important;
1343
          backface-visibility: visible !important;
1344
}
1345
@-webkit-keyframes flip-in-y {
1346
  0% {
1347
    -webkit-transform: perspective(550px) rotateY(90deg);
1348
            transform: perspective(550px) rotateY(90deg);
1349
    opacity: 0;
1350
  }
1351
  100% {
1352
    -webkit-transform: perspective(550px) rotateY(0deg);
1353
            transform: perspective(550px) rotateY(0deg);
1354
    opacity: 1;
1355
  }
1356
}
1357
@keyframes flip-in-y {
1358
  0% {
1359
    -webkit-transform: perspective(550px) rotateY(90deg);
1360
            transform: perspective(550px) rotateY(90deg);
1361
    opacity: 0;
1362
  }
1363
  100% {
1364
    -webkit-transform: perspective(550px) rotateY(0deg);
1365
            transform: perspective(550px) rotateY(0deg);
1366
    opacity: 1;
1367
  }
1368
}
1369

1370

1371
.flip-in-y {
1372
  -webkit-animation-name: flip-in-y;
1373
          animation-name: flip-in-y;
1374
  -webkit-backface-visibility: visible !important;
1375
          backface-visibility: visible !important;
1376
}
1377

1378

1379
@-webkit-keyframes flip-out-y {
1380
  0% {
1381
    -webkit-transform: perspective(550px) rotateY(0deg);
1382
            transform: perspective(550px) rotateY(0deg);
1383
    opacity: 1;
1384
  }
1385
  100% {
1386
    -webkit-transform: perspective(550px) rotateY(90deg);
1387
            transform: perspective(550px) rotateY(90deg);
1388
    opacity: 0;
1389
  }
1390
}
1391

1392

1393
@keyframes flip-out-y {
1394
  0% {
1395
    -webkit-transform: perspective(550px) rotateY(0deg);
1396
            transform: perspective(550px) rotateY(0deg);
1397
    opacity: 1;
1398
  }
1399
  100% {
1400
    -webkit-transform: perspective(550px) rotateY(90deg);
1401
            transform: perspective(550px) rotateY(90deg);
1402
    opacity: 0;
1403
  }
1404
}
1405

1406

1407
.flip-out-y {
1408
  -webkit-animation-name: flip-out-y;
1409
          animation-name: flip-out-y;
1410
  -webkit-backface-visibility: visible !important;
1411
          backface-visibility: visible !important;
1412
}
1413
@-webkit-keyframes flip-in-y-nr {
1414
  0% {
1415
    -webkit-transform: perspective(100px) rotateY(90deg);
1416
            transform: perspective(100px) rotateY(90deg);
1417
    opacity: 0;
1418
  }
1419
  100% {
1420
    -webkit-transform: perspective(100px) rotateY(0deg);
1421
            transform: perspective(100px) rotateY(0deg);
1422
    opacity: 1;
1423
  }
1424
}
1425
@keyframes flip-in-y-nr {
1426
  0% {
1427
    -webkit-transform: perspective(100px) rotateY(90deg);
1428
            transform: perspective(100px) rotateY(90deg);
1429
    opacity: 0;
1430
  }
1431
  100% {
1432
    -webkit-transform: perspective(100px) rotateY(0deg);
1433
            transform: perspective(100px) rotateY(0deg);
1434
    opacity: 1;
1435
  }
1436
}
1437

1438

1439
.flip-in-y-nr {
1440
  -webkit-animation-name: flip-in-y-nr;
1441
          animation-name: flip-in-y-nr;
1442
  -webkit-backface-visibility: visible !important;
1443
          backface-visibility: visible !important;
1444
}
1445

1446

1447
@-webkit-keyframes flip-out-y-nr {
1448
  0% {
1449
    -webkit-transform: perspective(100px) rotateY(0deg);
1450
            transform: perspective(100px) rotateY(0deg);
1451
    opacity: 1;
1452
  }
1453
  100% {
1454
    -webkit-transform: perspective(100px) rotateY(90deg);
1455
            transform: perspective(100px) rotateY(90deg);
1456
    opacity: 0;
1457
  }
1458
}
1459

1460

1461
@keyframes flip-out-y-nr {
1462
  0% {
1463
    -webkit-transform: perspective(100px) rotateY(0deg);
1464
            transform: perspective(100px) rotateY(0deg);
1465
    opacity: 1;
1466
  }
1467
  100% {
1468
    -webkit-transform: perspective(100px) rotateY(90deg);
1469
            transform: perspective(100px) rotateY(90deg);
1470
    opacity: 0;
1471
  }
1472
}
1473

1474

1475
.flip-out-y-nr {
1476
  -webkit-animation-name: flip-out-y-nr;
1477
          animation-name: flip-out-y-nr;
1478
  -webkit-backface-visibility: visible !important;
1479
          backface-visibility: visible !important;
1480
}
1481
@-webkit-keyframes flip-in-y-fr {
1482
  0% {
1483
    -webkit-transform: perspective(1000px) rotateY(90deg);
1484
            transform: perspective(1000px) rotateY(90deg);
1485
    opacity: 0;
1486
  }
1487
  100% {
1488
    -webkit-transform: perspective(1000px) rotateY(0deg);
1489
            transform: perspective(1000px) rotateY(0deg);
1490
    opacity: 1;
1491
  }
1492
}
1493
@keyframes flip-in-y-fr {
1494
  0% {
1495
    -webkit-transform: perspective(1000px) rotateY(90deg);
1496
            transform: perspective(1000px) rotateY(90deg);
1497
    opacity: 0;
1498
  }
1499
  100% {
1500
    -webkit-transform: perspective(1000px) rotateY(0deg);
1501
            transform: perspective(1000px) rotateY(0deg);
1502
    opacity: 1;
1503
  }
1504
}
1505

1506

1507
.flip-in-y-fr {
1508
  -webkit-animation-name: flip-in-y-fr;
1509
          animation-name: flip-in-y-fr;
1510
  -webkit-backface-visibility: visible !important;
1511
          backface-visibility: visible !important;
1512
}
1513

1514

1515
@-webkit-keyframes flip-out-y-fr {
1516
  0% {
1517
    -webkit-transform: perspective(1000px) rotateY(0deg);
1518
            transform: perspective(1000px) rotateY(0deg);
1519
    opacity: 1;
1520
  }
1521
  100% {
1522
    -webkit-transform: perspective(1000px) rotateY(90deg);
1523
            transform: perspective(1000px) rotateY(90deg);
1524
    opacity: 0;
1525
  }
1526
}
1527

1528

1529
@keyframes flip-out-y-fr {
1530
  0% {
1531
    -webkit-transform: perspective(1000px) rotateY(0deg);
1532
            transform: perspective(1000px) rotateY(0deg);
1533
    opacity: 1;
1534
  }
1535
  100% {
1536
    -webkit-transform: perspective(1000px) rotateY(90deg);
1537
            transform: perspective(1000px) rotateY(90deg);
1538
    opacity: 0;
1539
  }
1540
}
1541

1542

1543
.flip-out-y-fr {
1544
  -webkit-animation-name: flip-out-y-fr;
1545
          animation-name: flip-out-y-fr;
1546
  -webkit-backface-visibility: visible !important;
1547
          backface-visibility: visible !important;
1548
}
1549

1550
@-webkit-keyframes zoom-in {
1551
  0% {
1552
    -webkit-transform: scale(.7);
1553
            transform: scale(.7);
1554
    opacity: 0;
1555
  }
1556
  100% {
1557
    opacity: 1;
1558
  }
1559
}
1560

1561
@keyframes zoom-in {
1562
  0% {
1563
    -webkit-transform: scale(.7);
1564
            transform: scale(.7);
1565
    opacity: 0;
1566
  }
1567
  100% {
1568
    opacity: 1;
1569
  }
1570
}
1571

1572

1573
.zoom-in {
1574
  -webkit-animation-name: zoom-in;
1575
          animation-name: zoom-in;
1576
}
1577

1578

1579
@-webkit-keyframes zoom-out {
1580
  0% {
1581
    -webkit-transform: scale(1);
1582
            transform: scale(1);
1583
    opacity: 1;
1584
  }
1585
  50% {
1586
    -webkit-transform: scale(.7);
1587
            transform: scale(.7);
1588
    opacity: 0;
1589
  }
1590
  100% {
1591
    opacity: 0;
1592
  }
1593
}
1594

1595

1596
@keyframes zoom-out {
1597
  0% {
1598
    -webkit-transform: scale(1);
1599
            transform: scale(1);
1600
    opacity: 1;
1601
  }
1602
  50% {
1603
    -webkit-transform: scale(.7);
1604
            transform: scale(.7);
1605
    opacity: 0;
1606
  }
1607
  100% {
1608
    opacity: 0;
1609
  }
1610
}
1611

1612

1613
.zoom-out {
1614
  -webkit-animation-name: zoom-out;
1615
          animation-name: zoom-out;
1616
}
1617
@-webkit-keyframes zoom-in-sm {
1618
  0% {
1619
    -webkit-transform: scale(.95);
1620
            transform: scale(.95);
1621
    opacity: 0;
1622
  }
1623
  100% {
1624
    opacity: 1;
1625
  }
1626
}
1627
@keyframes zoom-in-sm {
1628
  0% {
1629
    -webkit-transform: scale(.95);
1630
            transform: scale(.95);
1631
    opacity: 0;
1632
  }
1633
  100% {
1634
    opacity: 1;
1635
  }
1636
}
1637

1638

1639
.zoom-in-sm {
1640
  -webkit-animation-name: zoom-in-sm;
1641
          animation-name: zoom-in-sm;
1642
}
1643

1644

1645
@-webkit-keyframes zoom-out-sm {
1646
  0% {
1647
    -webkit-transform: scale(1);
1648
            transform: scale(1);
1649
    opacity: 1;
1650
  }
1651
  50% {
1652
    -webkit-transform: scale(.95);
1653
            transform: scale(.95);
1654
    opacity: 0;
1655
  }
1656
  100% {
1657
    opacity: 0;
1658
  }
1659
}
1660

1661

1662
@keyframes zoom-out-sm {
1663
  0% {
1664
    -webkit-transform: scale(1);
1665
            transform: scale(1);
1666
    opacity: 1;
1667
  }
1668
  50% {
1669
    -webkit-transform: scale(.95);
1670
            transform: scale(.95);
1671
    opacity: 0;
1672
  }
1673
  100% {
1674
    opacity: 0;
1675
  }
1676
}
1677

1678

1679
.zoom-out-sm {
1680
  -webkit-animation-name: zoom-out-sm;
1681
          animation-name: zoom-out-sm;
1682
}
1683
@-webkit-keyframes zoom-in-lg {
1684
  0% {
1685
    -webkit-transform: scale(.4);
1686
            transform: scale(.4);
1687
    opacity: 0;
1688
  }
1689
  100% {
1690
    opacity: 1;
1691
  }
1692
}
1693
@keyframes zoom-in-lg {
1694
  0% {
1695
    -webkit-transform: scale(.4);
1696
            transform: scale(.4);
1697
    opacity: 0;
1698
  }
1699
  100% {
1700
    opacity: 1;
1701
  }
1702
}
1703

1704

1705
.zoom-in-lg {
1706
  -webkit-animation-name: zoom-in-lg;
1707
          animation-name: zoom-in-lg;
1708
}
1709

1710

1711
@-webkit-keyframes zoom-out-lg {
1712
  0% {
1713
    -webkit-transform: scale(1);
1714
            transform: scale(1);
1715
    opacity: 1;
1716
  }
1717
  50% {
1718
    -webkit-transform: scale(.4);
1719
            transform: scale(.4);
1720
    opacity: 0;
1721
  }
1722
  100% {
1723
    opacity: 0;
1724
  }
1725
}
1726

1727

1728
@keyframes zoom-out-lg {
1729
  0% {
1730
    -webkit-transform: scale(1);
1731
            transform: scale(1);
1732
    opacity: 1;
1733
  }
1734
  50% {
1735
    -webkit-transform: scale(.4);
1736
            transform: scale(.4);
1737
    opacity: 0;
1738
  }
1739
  100% {
1740
    opacity: 0;
1741
  }
1742
}
1743

1744

1745
.zoom-out-lg {
1746
  -webkit-animation-name: zoom-out-lg;
1747
          animation-name: zoom-out-lg;
1748
}
1749

1750
@-webkit-keyframes overlay-slide-in-top {
1751
  0% {
1752
    height: 100%;
1753
  }
1754
  100% {
1755
    height: 0;
1756
  }
1757
}
1758

1759
@keyframes overlay-slide-in-top {
1760
  0% {
1761
    height: 100%;
1762
  }
1763
  100% {
1764
    height: 0;
1765
  }
1766
}
1767

1768

1769
.overlay-slide-in-top {
1770
  top: 0;
1771
  height: 0;
1772
  -webkit-animation-name: overlay-slide-in-top;
1773
          animation-name: overlay-slide-in-top;
1774
}
1775

1776

1777
@-webkit-keyframes overlay-slide-out-top {
1778
  0% {
1779
    height: 0;
1780
  }
1781
  100% {
1782
    height: 100%;
1783
  }
1784
}
1785

1786

1787
@keyframes overlay-slide-out-top {
1788
  0% {
1789
    height: 0;
1790
  }
1791
  100% {
1792
    height: 100%;
1793
  }
1794
}
1795

1796

1797
.overlay-slide-out-top {
1798
  top: 0;
1799
  height: 100%;
1800
  -webkit-animation-name: overlay-slide-out-top;
1801
          animation-name: overlay-slide-out-top;
1802
}
1803
@-webkit-keyframes overlay-slide-in-bottom {
1804
  0% {
1805
    height: 100%;
1806
  }
1807
  100% {
1808
    height: 0;
1809
  }
1810
}
1811
@keyframes overlay-slide-in-bottom {
1812
  0% {
1813
    height: 100%;
1814
  }
1815
  100% {
1816
    height: 0;
1817
  }
1818
}
1819

1820

1821
.overlay-slide-in-bottom {
1822
  bottom: 0;
1823
  height: 0;
1824
  -webkit-animation-name: overlay-slide-in-bottom;
1825
          animation-name: overlay-slide-in-bottom;
1826
}
1827

1828

1829
@-webkit-keyframes overlay-slide-out-bottom {
1830
  0% {
1831
    height: 0;
1832
  }
1833
  100% {
1834
    height: 100%;
1835
  }
1836
}
1837

1838

1839
@keyframes overlay-slide-out-bottom {
1840
  0% {
1841
    height: 0;
1842
  }
1843
  100% {
1844
    height: 100%;
1845
  }
1846
}
1847

1848

1849
.overlay-slide-out-bottom {
1850
  bottom: 0;
1851
  height: 100%;
1852
  -webkit-animation-name: overlay-slide-out-bottom;
1853
          animation-name: overlay-slide-out-bottom;
1854
}
1855
@-webkit-keyframes overlay-slide-in-left {
1856
  0% {
1857
    width: 100%;
1858
  }
1859
  100% {
1860
    width: 0;
1861
  }
1862
}
1863
@keyframes overlay-slide-in-left {
1864
  0% {
1865
    width: 100%;
1866
  }
1867
  100% {
1868
    width: 0;
1869
  }
1870
}
1871

1872

1873
.overlay-slide-in-left {
1874
  width: 0;
1875
  -webkit-animation-name: overlay-slide-in-left;
1876
          animation-name: overlay-slide-in-left;
1877
}
1878

1879

1880
@-webkit-keyframes overlay-slide-out-left {
1881
  0% {
1882
    width: 0;
1883
  }
1884
  100% {
1885
    width: 100%;
1886
  }
1887
}
1888

1889

1890
@keyframes overlay-slide-out-left {
1891
  0% {
1892
    width: 0;
1893
  }
1894
  100% {
1895
    width: 100%;
1896
  }
1897
}
1898

1899

1900
.overlay-slide-out-left {
1901
  left: 0;
1902
  width: 100%;
1903
  -webkit-animation-name: overlay-slide-out-left;
1904
          animation-name: overlay-slide-out-left;
1905
}
1906
@-webkit-keyframes overlay-slide-in-right {
1907
  0% {
1908
    width: 100%;
1909
  }
1910
  100% {
1911
    width: 0;
1912
  }
1913
}
1914
@keyframes overlay-slide-in-right {
1915
  0% {
1916
    width: 100%;
1917
  }
1918
  100% {
1919
    width: 0;
1920
  }
1921
}
1922

1923

1924
.overlay-slide-in-right {
1925
  right: 0;
1926
  width: 0;
1927
  -webkit-animation-name: overlay-slide-in-right;
1928
          animation-name: overlay-slide-in-right;
1929
}
1930

1931

1932
@-webkit-keyframes overlay-slide-out-right {
1933
  0% {
1934
    width: 0;
1935
  }
1936
  100% {
1937
    width: 100%;
1938
  }
1939
}
1940

1941

1942
@keyframes overlay-slide-out-right {
1943
  0% {
1944
    width: 0;
1945
  }
1946
  100% {
1947
    width: 100%;
1948
  }
1949
}
1950

1951

1952
.overlay-slide-out-right {
1953
  right: 0;
1954
  width: 100%;
1955
  -webkit-animation-name: overlay-slide-out-right;
1956
          animation-name: overlay-slide-out-right;
1957
}
1958

1959
Product

Resources

Company
