In this repo i store all my websites, each in a different branch
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3161 lines
74 KiB

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