utils/test/reporting/pages/app/styles/animate.css

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