You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2742 lines
56 KiB

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