├── .gitignore ├── README.md ├── css ├── component.css ├── demo.css └── normalize.css ├── favicon.ico ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── font-awesome-4.3.0 │ ├── css │ ├── font-awesome.css │ └── font-awesome.min.css │ └── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── img ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png └── related │ ├── ElastiStack.jpg │ └── StackEffects.jpg ├── index.html └── js ├── classie.js ├── dynamics.min.js ├── main.js └── modernizr-custom.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Effects for Card Stacks 2 | 3 | Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element. 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=25356) 6 | 7 | [Demo](http://tympanus.net/Development/CardStackEffects/) 8 | 9 | ## License 10 | 11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 12 | 13 | Read more here: [License](http://tympanus.net/codrops/licensing/) 14 | 15 | ## Credits 16 | 17 | [Dynamics.js](http://dynamicsjs.com/) by Michaël Villar 18 | 19 | [Tree vector](http://www.freepik.com/free-photos-vectors/tree) designed by Freepik 20 | 21 | ## Misc 22 | 23 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 24 | 25 | [© Codrops 2015](http://www.codrops.com) 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .stack { 2 | margin: 0 auto; 3 | position: relative; 4 | z-index: 1000; 5 | width: 320px; 6 | height: 320px; 7 | padding: 0; 8 | list-style: none; 9 | pointer-events: none; 10 | } 11 | 12 | .stack__item { 13 | background: #fff; 14 | height: 100%; 15 | width: 100%; 16 | border-radius: 4px; 17 | text-align: center; 18 | overflow: hidden; 19 | position: absolute; 20 | opacity: 0; 21 | display: -webkit-flex; 22 | display: flex; 23 | -webkit-flex-direction: column; 24 | flex-direction: column; 25 | -webkit-touch-callout: none; 26 | -webkit-user-select: none; 27 | -khtml-user-select: none; 28 | -moz-user-select: none; 29 | -ms-user-select: none; 30 | user-select: none; 31 | pointer-events: auto; 32 | } 33 | 34 | .stack__item img { 35 | width: 100%; 36 | display: block; 37 | pointer-events: none; 38 | } 39 | 40 | .controls { 41 | position: relative; 42 | width: 200px; 43 | text-align: center; 44 | margin: 3em 0 0 0; 45 | } 46 | 47 | .button { 48 | border: none; 49 | background: none; 50 | position: relative; 51 | display: inline-block; 52 | padding: 0.25em; 53 | margin: 0 0.5em; 54 | cursor: pointer; 55 | font-size: 1.5em; 56 | width: 50px; 57 | height: 50px; 58 | z-index: 100; 59 | -webkit-tap-highlight-color:rgba(0,0,0,0); 60 | } 61 | 62 | .button .fa { 63 | pointer-events: none; 64 | } 65 | 66 | .button--default { 67 | background: #333; 68 | border-radius: 3px; 69 | color: #fff; 70 | font-size: 0.95em; 71 | font-weight: bold; 72 | padding: 0.65em 2em; 73 | width: auto; 74 | height: auto; 75 | } 76 | 77 | .button--sonar { 78 | border-radius: 50%; 79 | background: #fff; 80 | } 81 | 82 | .button--sonar::before { 83 | position: absolute; 84 | top: 50%; 85 | left: 50%; 86 | border-radius: 50%; 87 | content: ''; 88 | opacity: 0; 89 | pointer-events: none; 90 | border: 4px solid rgba(255,255,255,0.5); 91 | margin: -35px 0 0 -35px; 92 | width: 70px; 93 | height: 70px; 94 | } 95 | 96 | .button--sonar.button--active::before { 97 | -webkit-animation: anim-effect-sonar 0.3s ease-out forwards; 98 | animation: anim-effect-sonar 0.3s ease-out forwards; 99 | } 100 | 101 | @-webkit-keyframes anim-effect-sonar { 102 | 0% { 103 | opacity: 1; 104 | -webkit-transform: scale3d(0.9, 0.9, 1); 105 | transform: scale3d(0.9, 0.9, 1); 106 | } 107 | to { 108 | opacity: 0; 109 | -webkit-transform: scale3d(1.4, 1.4, 1); 110 | transform: scale3d(1.4, 1.4, 1); 111 | } 112 | } 113 | 114 | @keyframes anim-effect-sonar { 115 | 0% { 116 | opacity: 1; 117 | -webkit-transform: scale3d(0.9, 0.9, 1); 118 | transform: scale3d(0.9, 0.9, 1); 119 | } 120 | to { 121 | opacity: 0; 122 | -webkit-transform: scale3d(1.4, 1.4, 1); 123 | transform: scale3d(1.4, 1.4, 1); 124 | } 125 | } 126 | 127 | .material-circle { 128 | width: 150vh; 129 | height: 150vh; 130 | margin: -75vh 0 0 -75vh; 131 | z-index: 0; 132 | border-radius: 50%; 133 | pointer-events: none; 134 | opacity: 0; 135 | position: absolute; 136 | z-index: 0; 137 | -webkit-transform: scale3d(0, 0, 1); 138 | transform: scale3d(0, 0, 1); 139 | } 140 | 141 | .material-circle--accept.material-circle--active { 142 | background: #81d47d; 143 | } 144 | 145 | .material-circle--reject.material-circle--active { 146 | background: #e66868; 147 | } 148 | 149 | .material-circle--active { 150 | -webkit-animation: anim-effect-material 0.6s ease-out forwards; 151 | animation: anim-effect-material 0.6s ease-out forwards; 152 | } 153 | 154 | @-webkit-keyframes anim-effect-material { 155 | 0% { 156 | opacity: 1; 157 | -webkit-transform: scale3d(0, 0, 1); 158 | transform: scale3d(0, 0, 1); 159 | } 160 | 70% { 161 | opacity: 1; 162 | -webkit-transform: scale3d(1.4, 1.4, 1); 163 | transform: scale3d(1.4, 1.4, 1); 164 | } 165 | 100% { 166 | opacity: 0; 167 | -webkit-transform: scale3d(1.4, 1.4, 1); 168 | transform: scale3d(1.4, 1.4, 1); 169 | } 170 | } 171 | 172 | @keyframes anim-effect-material { 173 | 0% { 174 | opacity: 1; 175 | -webkit-transform: scale3d(0, 0, 1); 176 | transform: scale3d(0, 0, 1); 177 | } 178 | 70% { 179 | opacity: 1; 180 | -webkit-transform: scale3d(1.4, 1.4, 1); 181 | transform: scale3d(1.4, 1.4, 1); 182 | } 183 | 100% { 184 | opacity: 0; 185 | -webkit-transform: scale3d(1.4, 1.4, 1); 186 | transform: scale3d(1.4, 1.4, 1); 187 | } 188 | } 189 | 190 | .button:focus { 191 | outline: none; 192 | } 193 | 194 | .button--accept { 195 | color: #81d47d; 196 | } 197 | 198 | .button--reject { 199 | color: #e66868; 200 | } 201 | 202 | .text-hidden { 203 | position: absolute; 204 | overflow: hidden; 205 | width: 0; 206 | height: 0; 207 | color: transparent; 208 | display: block; 209 | } 210 | 211 | /* Animations */ 212 | .stack__item--reject, 213 | .stack__item--accept { 214 | pointer-events: none; 215 | } 216 | 217 | /***********************************************/ 218 | /******************** yuda *********************/ 219 | /***********************************************/ 220 | 221 | .stack--yuda .stack__item--reject { 222 | -webkit-animation: yudaReject 0.5s forwards; 223 | animation: yudaReject 0.5s forwards; 224 | } 225 | 226 | @-webkit-keyframes yudaReject { 227 | to { 228 | opacity: 0; 229 | -webkit-transform: translate3d(0,200px,0); 230 | transform: translate3d(0,200px,0); 231 | } 232 | } 233 | 234 | @keyframes yudaReject { 235 | to { 236 | opacity: 0; 237 | -webkit-transform: translate3d(0,200px,0); 238 | transform: translate3d(0,200px,0); 239 | } 240 | } 241 | 242 | .stack--yuda .stack__item--accept { 243 | -webkit-animation: yudaAccept 0.5s forwards; 244 | animation: yudaAccept 0.5s forwards; 245 | -webkit-transform-origin: 50% 300%; 246 | transform-origin: 50% 300%; 247 | } 248 | 249 | @-webkit-keyframes yudaAccept { 250 | to { 251 | opacity: 0; 252 | -webkit-transform: rotate3d(0,0,1,20deg); 253 | transform: rotate3d(0,0,1,20deg); 254 | } 255 | } 256 | 257 | @keyframes yudaAccept { 258 | to { 259 | opacity: 0; 260 | -webkit-transform: rotate3d(0,0,1,20deg); 261 | transform: rotate3d(0,0,1,20deg); 262 | } 263 | } 264 | 265 | 266 | /***********************************************/ 267 | /******************** krisna *******************/ 268 | /***********************************************/ 269 | 270 | 271 | .stack--krisna .stack__item--reject { 272 | -webkit-animation: krisnaReject 0.5s forwards; 273 | animation: krisnaReject 0.5s forwards; 274 | } 275 | 276 | @-webkit-keyframes krisnaReject { 277 | to { 278 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 279 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 280 | } 281 | } 282 | 283 | @keyframes krisnaReject { 284 | to { 285 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 286 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 287 | } 288 | } 289 | 290 | .stack--krisna .stack__item--accept { 291 | -webkit-animation: krisnaAccept 0.5s forwards; 292 | animation: krisnaAccept 0.5s forwards; 293 | } 294 | 295 | @-webkit-keyframes krisnaAccept { 296 | to { 297 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 298 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 299 | } 300 | } 301 | 302 | @keyframes krisnaAccept { 303 | to { 304 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 305 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 306 | } 307 | } 308 | 309 | /* ...when content has 100% viewport width */ 310 | @media screen and (max-width: 60em) { 311 | @-webkit-keyframes krisnaReject { 312 | to { 313 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 314 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 315 | } 316 | } 317 | 318 | @keyframes krisnaReject { 319 | to { 320 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 321 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 322 | } 323 | } 324 | 325 | @-webkit-keyframes krisnaAccept { 326 | to { 327 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 328 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 329 | } 330 | } 331 | 332 | @keyframes krisnaAccept { 333 | to { 334 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 335 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 336 | } 337 | } 338 | } 339 | 340 | 341 | /***********************************************/ 342 | /******************** wangi *********************/ 343 | /***********************************************/ 344 | 345 | .stack--wangi .stack__item--reject { 346 | -webkit-animation: wangiReject 0.5s forwards; 347 | animation: wangiReject 0.5s forwards; 348 | -webkit-transform-origin: 0% 0%; 349 | transform-origin: 0% 0%; 350 | } 351 | 352 | @-webkit-keyframes wangiReject { 353 | to { 354 | opacity: 0; 355 | -webkit-transform: translate3d(0, 400px,0) rotate3d(0,0,1,40deg); 356 | transform: translate3d(0, 400px,0) rotate3d(0,0,1,40deg); 357 | } 358 | } 359 | 360 | @keyframes wangiReject { 361 | to { 362 | opacity: 0; 363 | -webkit-transform: translate3d(0, 400px,0) rotate3d(0,0,1,40deg); 364 | transform: translate3d(0, 400px,0) rotate3d(0,0,1,40deg); 365 | } 366 | } 367 | 368 | .stack--wangi .stack__item--accept { 369 | -webkit-animation: wangiAccept 0.5s forwards; 370 | animation: wangiAccept 0.5s forwards; 371 | -webkit-transform-origin: 100% 0%; 372 | transform-origin: 100% 0%; 373 | } 374 | 375 | @-webkit-keyframes wangiAccept { 376 | to { 377 | opacity: 0; 378 | -webkit-transform: translate3d(0, 400px,0) rotate3d(0,0,1,-40deg); 379 | transform: translate3d(0, 400px,0) rotate3d(0,0,1,-40deg); 380 | } 381 | } 382 | 383 | @keyframes wangiAccept { 384 | to { 385 | opacity: 0; 386 | -webkit-transform: translate3d(0, 400px,0) rotate3d(0,0,1,-40deg); 387 | transform: translate3d(0, 400px,0) rotate3d(0,0,1,-40deg); 388 | } 389 | } 390 | 391 | 392 | /***********************************************/ 393 | /********************* wira ********************/ 394 | /***********************************************/ 395 | 396 | 397 | .stack--wira .stack__item--reject { 398 | -webkit-animation: wiraReject 0.5s forwards; 399 | animation: wiraReject 0.5s forwards; 400 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 401 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 402 | -webkit-transform-origin: -150% 50%; 403 | transform-origin: -150% 50%; 404 | } 405 | 406 | @-webkit-keyframes wiraReject { 407 | to { 408 | opacity: 0; 409 | -webkit-transform: rotate3d(0,0,1,-60deg); 410 | transform: rotate3d(0,0,1,-60deg); 411 | } 412 | } 413 | 414 | @keyframes wiraReject { 415 | to { 416 | opacity: 0; 417 | -webkit-transform: rotate3d(0,0,1,-60deg); 418 | transform: rotate3d(0,0,1,-60deg); 419 | } 420 | } 421 | 422 | .stack--wira .stack__item--accept { 423 | -webkit-animation: wiraAccept 0.5s forwards; 424 | animation: wiraAccept 0.5s forwards; 425 | -webkit-animation-timing-function: cubic-bezier(0.3,1,0.3,1); 426 | animation-timing-function: cubic-bezier(0.3,1,0.3,1); 427 | -webkit-transform-origin: 250% 50%; 428 | transform-origin: 250% 50%; 429 | } 430 | 431 | @-webkit-keyframes wiraAccept { 432 | to { 433 | opacity: 0; 434 | -webkit-transform: rotate3d(0,0,1,60deg); 435 | transform: rotate3d(0,0,1,60deg); 436 | } 437 | } 438 | 439 | @keyframes wiraAccept { 440 | to { 441 | opacity: 0; 442 | -webkit-transform: rotate3d(0,0,1,60deg); 443 | transform: rotate3d(0,0,1,60deg); 444 | } 445 | } 446 | 447 | 448 | /***********************************************/ 449 | /******************** utari ********************/ 450 | /***********************************************/ 451 | 452 | .stack--utari .stack__item--reject { 453 | -webkit-animation: utariReject 0.6s forwards; 454 | animation: utariReject 0.6s forwards; 455 | -webkit-animation-timing-function: ease-in; 456 | animation-timing-function: ease-in; 457 | -webkit-transform-origin: 50% 100%; 458 | transform-origin: 50% 100%; 459 | } 460 | 461 | @-webkit-keyframes utariReject { 462 | 40% { 463 | opacity: 1; 464 | -webkit-animation-timing-function: ease-out; 465 | animation-timing-function: ease-out; 466 | -webkit-transform: translate3d(0,-20%,30px); 467 | transform: translate3d(0,-20%,30px); 468 | } 469 | 100% { 470 | opacity: 0; 471 | -webkit-transform: translate3d(0,150%,-300px) rotate3d(1,0,0,-40deg); 472 | transform: translate3d(0,150%,-300px) rotate3d(1,0,0,-40deg); 473 | } 474 | } 475 | 476 | @keyframes utariReject { 477 | 40% { 478 | opacity: 1; 479 | -webkit-animation-timing-function: ease-out; 480 | animation-timing-function: ease-out; 481 | -webkit-transform: translate3d(0,-20%,30px); 482 | transform: translate3d(0,-20%,30px); 483 | } 484 | 100% { 485 | opacity: 0; 486 | -webkit-transform: translate3d(0,150%,-300px) rotate3d(1,0,0,-40deg); 487 | transform: translate3d(0,150%,-300px) rotate3d(1,0,0,-40deg); 488 | } 489 | } 490 | 491 | .stack--utari .stack__item--accept { 492 | -webkit-animation: utariAccept 0.6s forwards; 493 | animation: utariAccept 0.6s forwards; 494 | -webkit-animation-timing-function: ease-in; 495 | animation-timing-function: ease-in; 496 | } 497 | 498 | @-webkit-keyframes utariAccept { 499 | 40% { 500 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 501 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 502 | -webkit-transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 503 | transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 504 | } 505 | 100% { 506 | opacity: 0; 507 | -webkit-transform: translate3d(25vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 508 | transform: translate3d(25vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 509 | } 510 | } 511 | 512 | @keyframes utariAccept { 513 | 40% { 514 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 515 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 516 | -webkit-transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 517 | transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 518 | } 519 | 100% { 520 | opacity: 0; 521 | -webkit-transform: translate3d(25vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 522 | transform: translate3d(25vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 523 | } 524 | } 525 | 526 | /* ...when content has 100% viewport width */ 527 | @media screen and (max-width: 60em) { 528 | @-webkit-keyframes utariAccept { 529 | 40% { 530 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 531 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 532 | -webkit-transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 533 | transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 534 | } 535 | 100% { 536 | opacity: 0; 537 | -webkit-transform: translate3d(50vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 538 | transform: translate3d(50vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 539 | } 540 | } 541 | 542 | @keyframes utariAccept { 543 | 40% { 544 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 545 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 546 | -webkit-transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 547 | transform: translate3d(-40%,0,0) scale3d(1.1,1.1,1); 548 | } 549 | 100% { 550 | opacity: 0; 551 | -webkit-transform: translate3d(50vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 552 | transform: translate3d(50vw,0,0) translate3d(10%,0,0) scale3d(0.1,0.1,1); 553 | } 554 | } 555 | } 556 | 557 | /***********************************************/ 558 | /******************* slamet ********************/ 559 | /***********************************************/ 560 | 561 | .counter { 562 | position: absolute; 563 | left: 50%; 564 | top: 30px; 565 | width: 40px; 566 | margin-left: -20px; 567 | } 568 | 569 | .counter svg { 570 | display: block; 571 | margin: 14px auto 0; 572 | fill: #58785A; 573 | } 574 | 575 | .counter__number { 576 | text-align: center; 577 | position: absolute; 578 | background: #e66868; 579 | font-size: 10px; 580 | font-weight: bold; 581 | color: #fff; 582 | width: 20px; 583 | height: 20px; 584 | line-height: 20px; 585 | border-radius: 50%; 586 | bottom: -5px; 587 | right: -5px; 588 | } 589 | 590 | .stack--slamet .stack__item--reject { 591 | -webkit-animation: slametReject 0.5s forwards; 592 | animation: slametReject 0.5s forwards; 593 | -webkit-transform-origin: 50% 100%; 594 | transform-origin: 50% 100%; 595 | } 596 | 597 | @-webkit-keyframes slametReject { 598 | to { 599 | opacity: 0; 600 | -webkit-transform: rotate3d(1,0,0,-90deg); 601 | transform: rotate3d(1,0,0,-90deg); 602 | } 603 | } 604 | 605 | @keyframes slametReject { 606 | to { 607 | opacity: 0; 608 | -webkit-transform: rotate3d(1,0,0,-90deg); 609 | transform: rotate3d(1,0,0,-90deg); 610 | } 611 | } 612 | 613 | .stack--slamet .stack__item--accept { 614 | -webkit-animation: slametAccept 0.6s forwards; 615 | animation: slametAccept 0.6s forwards; 616 | -webkit-animation-timing-function: ease-in; 617 | animation-timing-function: ease-in; 618 | } 619 | 620 | @-webkit-keyframes slametAccept { 621 | 40% { 622 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 623 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 624 | -webkit-transform: translate3d(0,20%,0) scale3d(1.1,1.1,1); 625 | transform: translate3d(0,20%,0) scale3d(1.1,1.1,1); 626 | } 627 | 80% { 628 | opacity: 1; 629 | -webkit-transform: translate3d(0,-280px,0) scale3d(0.1,0.1,1); 630 | transform: translate3d(0,-280px,0) scale3d(0.1,0.1,1); 631 | } 632 | 100% { 633 | opacity: 0; 634 | -webkit-transform: translate3d(0,-250px,0) scale3d(0.05,0.05,1); 635 | transform: translate3d(0,-250px,0) scale3d(0.05,0.05,1); 636 | } 637 | } 638 | 639 | @keyframes slametAccept { 640 | 40% { 641 | -webkit-animation-timing-function: cubic-bezier(0.4,1,0.3,1); 642 | animation-timing-function: cubic-bezier(0.4,1,0.3,1); 643 | -webkit-transform: translate3d(0,20%,0) scale3d(1.1,1.1,1); 644 | transform: translate3d(0,20%,0) scale3d(1.1,1.1,1); 645 | } 646 | 80% { 647 | opacity: 1; 648 | -webkit-transform: translate3d(0,-280px,0) scale3d(0.1,0.1,1); 649 | transform: translate3d(0,-280px,0) scale3d(0.1,0.1,1); 650 | } 651 | 100% { 652 | opacity: 0; 653 | -webkit-transform: translate3d(0,-250px,0) scale3d(0.05,0.05,1); 654 | transform: translate3d(0,-250px,0) scale3d(0.05,0.05,1); 655 | } 656 | } 657 | 658 | 659 | /***********************************************/ 660 | /******************** eka **********************/ 661 | /***********************************************/ 662 | 663 | 664 | .stack--eka .stack__item--reject { 665 | -webkit-animation: ekaReject 0.5s forwards; 666 | animation: ekaReject 0.5s forwards; 667 | -webkit-transform-origin: 100% 50%; 668 | transform-origin: 100% 50%; 669 | } 670 | 671 | @-webkit-keyframes ekaReject { 672 | to { 673 | opacity: 0; 674 | -webkit-transform: translate3d(-150%,150%,0) rotate3d(0,0,1,-20deg); 675 | transform: translate3d(-150%,150%,0) rotate3d(0,0,1,-20deg); 676 | } 677 | } 678 | 679 | @keyframes ekaReject { 680 | to { 681 | opacity: 0; 682 | -webkit-transform: translate3d(-150%,150%,0) rotate3d(0,0,1,-20deg); 683 | transform: translate3d(-150%,150%,0) rotate3d(0,0,1,-20deg); 684 | } 685 | } 686 | 687 | .stack--eka .stack__item--accept { 688 | -webkit-animation: ekaAccept 0.5s forwards; 689 | animation: ekaAccept 0.5s forwards; 690 | -webkit-transform-origin: -100% 50%; 691 | transform-origin: -100% 50%; 692 | } 693 | 694 | @-webkit-keyframes ekaAccept { 695 | to { 696 | opacity: 0; 697 | -webkit-transform: translate3d(150%,-150%,0) rotate3d(0,0,1,20deg); 698 | transform: translate3d(150%,-150%,0) rotate3d(0,0,1,20deg); 699 | } 700 | } 701 | 702 | @keyframes ekaAccept { 703 | to { 704 | opacity: 0; 705 | -webkit-transform: translate3d(150%,-150%,0) rotate3d(0,0,1,20deg); 706 | transform: translate3d(150%,-150%,0) rotate3d(0,0,1,20deg); 707 | } 708 | } 709 | 710 | 711 | /***********************************************/ 712 | /******************** dian *********************/ 713 | /***********************************************/ 714 | 715 | 716 | .stack--dian .stack__item--reject { 717 | -webkit-animation: dianReject 0.5s forwards; 718 | animation: dianReject 0.5s forwards; 719 | -webkit-transform-origin: 50% -300%; 720 | transform-origin: 50% -300%; 721 | } 722 | 723 | @-webkit-keyframes dianReject { 724 | to { 725 | opacity: 0; 726 | -webkit-transform: rotate3d(0,0,1,20deg); 727 | transform: rotate3d(0,0,1,20deg); 728 | } 729 | } 730 | 731 | @keyframes dianReject { 732 | to { 733 | opacity: 0; 734 | -webkit-transform: rotate3d(0,0,1,20deg); 735 | transform: rotate3d(0,0,1,20deg); 736 | } 737 | } 738 | 739 | .stack--dian .stack__item--accept { 740 | -webkit-animation: dianAccept 0.5s forwards; 741 | animation: dianAccept 0.5s forwards; 742 | -webkit-transform-origin: 50% -300%; 743 | transform-origin: 50% -300%; 744 | } 745 | 746 | @-webkit-keyframes dianAccept { 747 | to { 748 | opacity: 0; 749 | -webkit-transform: rotate3d(0,0,1,-20deg); 750 | transform: rotate3d(0,0,1,-20deg); 751 | } 752 | } 753 | 754 | @keyframes dianAccept { 755 | to { 756 | opacity: 0; 757 | -webkit-transform: rotate3d(0,0,1,-20deg); 758 | transform: rotate3d(0,0,1,-20deg); 759 | } 760 | } 761 | 762 | 763 | /***********************************************/ 764 | /******************** iman *********************/ 765 | /***********************************************/ 766 | 767 | 768 | .stack--iman .stack__item--reject { 769 | -webkit-animation: imanReject 0.5s forwards; 770 | animation: imanReject 0.5s forwards; 771 | } 772 | 773 | @-webkit-keyframes imanReject { 774 | to { 775 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 776 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 777 | } 778 | } 779 | 780 | @keyframes imanReject { 781 | to { 782 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 783 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 784 | } 785 | } 786 | 787 | .stack--iman .stack__item--accept { 788 | -webkit-animation: imanAccept 0.5s forwards; 789 | animation: imanAccept 0.5s forwards; 790 | } 791 | 792 | @-webkit-keyframes imanAccept { 793 | to { 794 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 795 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 796 | } 797 | } 798 | 799 | @keyframes imanAccept { 800 | to { 801 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 802 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 803 | } 804 | } 805 | 806 | /* ...when content has 100% viewport width */ 807 | @media screen and (max-width: 60em) { 808 | 809 | @-webkit-keyframes imanReject { 810 | to { 811 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 812 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 813 | } 814 | } 815 | 816 | @keyframes imanReject { 817 | to { 818 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 819 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0) rotate3d(0,0,1,-5deg); 820 | } 821 | } 822 | 823 | @-webkit-keyframes imanAccept { 824 | to { 825 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 826 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 827 | } 828 | } 829 | 830 | @keyframes imanAccept { 831 | to { 832 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 833 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 834 | } 835 | } 836 | 837 | } 838 | 839 | /***********************************************/ 840 | /****************** iskandar *******************/ 841 | /***********************************************/ 842 | 843 | 844 | .stack--iskandar .stack__item--reject { 845 | -webkit-animation: iskandarReject 0.5s forwards; 846 | animation: iskandarReject 0.5s forwards; 847 | -webkit-transform-origin: 50% 0%; 848 | transform-origin: 50% 0%; 849 | } 850 | 851 | @-webkit-keyframes iskandarReject { 852 | 50% { 853 | opacity: 1; 854 | } 855 | 100% { 856 | opacity: 0; 857 | -webkit-transform: translate3d(0,-100px,20px) rotate3d(1,0,0,90deg); 858 | transform: translate3d(0,-100px,20px) rotate3d(1,0,0,90deg); 859 | } 860 | } 861 | 862 | @keyframes iskandarReject { 863 | 50% { 864 | opacity: 1; 865 | } 866 | 100% { 867 | opacity: 0; 868 | -webkit-transform: translate3d(0,-100px,20px) rotate3d(1,0,0,90deg); 869 | transform: translate3d(0,-100px,20px) rotate3d(1,0,0,90deg); 870 | } 871 | } 872 | 873 | .stack--iskandar .stack__item--accept { 874 | -webkit-animation: iskandarAccept 0.5s forwards; 875 | animation: iskandarAccept 0.5s forwards; 876 | } 877 | 878 | @-webkit-keyframes iskandarAccept { 879 | to { 880 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 881 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 882 | } 883 | } 884 | 885 | @keyframes iskandarAccept { 886 | to { 887 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 888 | transform: translate3d(25vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 889 | } 890 | } 891 | 892 | /* ...when content has 100% viewport width */ 893 | @media screen and (max-width: 60em) { 894 | 895 | @-webkit-keyframes iskandarAccept { 896 | to { 897 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 898 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 899 | } 900 | } 901 | 902 | @keyframes iskandarAccept { 903 | to { 904 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 905 | transform: translate3d(50vw,0,0) translate3d(60%,0,0) rotate3d(0,0,1,5deg); 906 | } 907 | } 908 | 909 | } 910 | 911 | /***********************************************/ 912 | /******************** kasih ********************/ 913 | /***********************************************/ 914 | 915 | 916 | .stack--kasih .stack__item--reject { 917 | -webkit-animation: kasihReject 0.4s ease-in forwards; 918 | animation: kasihReject 0.4s ease-in forwards; 919 | } 920 | 921 | @-webkit-keyframes kasihReject { 922 | to { 923 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 924 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 925 | } 926 | } 927 | 928 | @keyframes kasihReject { 929 | to { 930 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 931 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 932 | } 933 | } 934 | 935 | .stack--kasih .stack__item--accept { 936 | -webkit-animation: kasihAccept 0.4s ease-in forwards; 937 | animation: kasihAccept 0.4s ease-in forwards; 938 | } 939 | 940 | @-webkit-keyframes kasihAccept { 941 | to { 942 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0); 943 | transform: translate3d(25vw,0,0) translate3d(60%,0,0); 944 | } 945 | } 946 | 947 | @keyframes kasihAccept { 948 | to { 949 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0); 950 | transform: translate3d(25vw,0,0) translate3d(60%,0,0); 951 | } 952 | } 953 | 954 | /* ...when content has 100% vieport width */ 955 | @media screen and (max-width: 60em) { 956 | @-webkit-keyframes kasihReject { 957 | to { 958 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 959 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 960 | } 961 | } 962 | 963 | @keyframes kasihReject { 964 | to { 965 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 966 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 967 | } 968 | } 969 | 970 | @-webkit-keyframes kasihAccept { 971 | to { 972 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0); 973 | transform: translate3d(50vw,0,0) translate3d(60%,0,0); 974 | } 975 | } 976 | 977 | @keyframes kasihAccept { 978 | to { 979 | -webkit-transform: translate3d(50vw,0,0) translate3d(60%,0,0); 980 | transform: translate3d(50vw,0,0) translate3d(60%,0,0); 981 | } 982 | } 983 | } 984 | 985 | /***********************************************/ 986 | /******************* buana ********************/ 987 | /***********************************************/ 988 | 989 | 990 | .stack--buana .stack__item--reject { 991 | -webkit-animation: buanaReject 0.5s forwards; 992 | animation: buanaReject 0.5s forwards; 993 | } 994 | 995 | @-webkit-keyframes buanaReject { 996 | to { 997 | opacity: 0; 998 | -webkit-transform: translate3d(-25%,200%,0) rotate3d(0,0,1,25deg); 999 | transform: translate3d(-25%,200%,0) rotate3d(0,0,1,215deg); 1000 | } 1001 | } 1002 | 1003 | @keyframes buanaReject { 1004 | to { 1005 | opacity: 0; 1006 | -webkit-transform: translate3d(-25%,200%,0) rotate3d(0,0,1,25deg); 1007 | transform: translate3d(-25%,200%,0) rotate3d(0,0,1,25deg); 1008 | } 1009 | } 1010 | 1011 | .stack--buana .stack__item--accept { 1012 | -webkit-animation: buanaAccept 0.5s forwards; 1013 | animation: buanaAccept 0.5s forwards; 1014 | } 1015 | 1016 | @-webkit-keyframes buanaAccept { 1017 | to { 1018 | opacity: 0; 1019 | -webkit-transform: translate3d(25%,200%,0) rotate3d(0,0,1,-25deg); 1020 | transform: translate3d(25%,200%,0) rotate3d(0,0,1,-25deg); 1021 | } 1022 | } 1023 | 1024 | @keyframes buanaAccept { 1025 | to { 1026 | opacity: 0; 1027 | -webkit-transform: translate3d(25%,200%,0) rotate3d(0,0,1,-25deg); 1028 | transform: translate3d(25%,200%,0) rotate3d(0,0,1,-25deg); 1029 | } 1030 | } 1031 | 1032 | /***********************************************/ 1033 | /******************** mawar *********************/ 1034 | /***********************************************/ 1035 | 1036 | .stack--mawar .stack__item--reject { 1037 | -webkit-animation: mawarReject 0.5s forwards; 1038 | animation: mawarReject 0.5s forwards; 1039 | } 1040 | 1041 | @-webkit-keyframes mawarReject { 1042 | to { 1043 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 1044 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 1045 | } 1046 | } 1047 | 1048 | @keyframes mawarReject { 1049 | to { 1050 | -webkit-transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 1051 | transform: translate3d(-25vw,0,0) translate3d(-60%,0,0); 1052 | } 1053 | } 1054 | 1055 | .stack--mawar .stack__item--accept { 1056 | -webkit-animation: mawarAccept 0.5s forwards; 1057 | animation: mawarAccept 0.5s forwards; 1058 | -webkit-transform-origin: 100% 50%; 1059 | transform-origin: 100% 50%; 1060 | } 1061 | 1062 | @-webkit-keyframes mawarAccept { 1063 | to { 1064 | opacity: 0; 1065 | -webkit-transform: translate3d(150px,0,0) scale3d(0.7,0.7,1) rotate3d(0,1,0,90deg); 1066 | transform: translate3d(150px,0,0) scale3d(0.7,0.7,1) rotate3d(0,1,0,90deg); 1067 | } 1068 | } 1069 | 1070 | @keyframes mawarAccept { 1071 | to { 1072 | opacity: 0; 1073 | -webkit-transform: translate3d(150px,0,0) scale3d(0.7,0.7,1) rotate3d(0,1,0,90deg); 1074 | transform: translate3d(150px,0,0) scale3d(0.7,0.7,1) rotate3d(0,1,0,90deg); 1075 | } 1076 | } 1077 | 1078 | /* ...when content has 100% vieport width */ 1079 | @media screen and (max-width: 60em) { 1080 | 1081 | @-webkit-keyframes mawarReject { 1082 | to { 1083 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 1084 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 1085 | } 1086 | } 1087 | 1088 | @keyframes mawarReject { 1089 | to { 1090 | -webkit-transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 1091 | transform: translate3d(-50vw,0,0) translate3d(-60%,0,0); 1092 | } 1093 | } 1094 | 1095 | } 1096 | 1097 | 1098 | /***********************************************/ 1099 | /******************** cinta **********************/ 1100 | /***********************************************/ 1101 | 1102 | 1103 | .stack--cinta .stack__item--reject { 1104 | -webkit-animation: cintaReject 0.5s forwards; 1105 | animation: cintaReject 0.5s forwards; 1106 | } 1107 | 1108 | @-webkit-keyframes cintaReject { 1109 | to { 1110 | opacity: 0; 1111 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0); 1112 | transform: translate3d(25vw,0,0) translate3d(60%,0,0); 1113 | } 1114 | } 1115 | 1116 | @keyframes cintaReject { 1117 | to { 1118 | opacity: 0; 1119 | -webkit-transform: translate3d(25vw,0,0) translate3d(60%,0,0); 1120 | transform: translate3d(25vw,0,0) translate3d(60%,0,0); 1121 | } 1122 | } 1123 | 1124 | .stack--cinta .stack__item--accept { 1125 | -webkit-animation: cintaAccept 0.5s forwards; 1126 | animation: cintaAccept 0.5s forwards; 1127 | } 1128 | 1129 | @-webkit-keyframes cintaAccept { 1130 | to { 1131 | opacity: 0; 1132 | -webkit-transform: translate3d(0,0,1000px); 1133 | transform: translate3d(0,0,1000px); 1134 | } 1135 | } 1136 | 1137 | @keyframes cintaAccept { 1138 | to { 1139 | opacity: 0; 1140 | -webkit-transform: translate3d(0,0,1000px); 1141 | transform: translate3d(0,0,1000px); 1142 | } 1143 | } 1144 | 1145 | @media screen and (max-width: 60em) { 1146 | .stack { 1147 | width: 260px; 1148 | height: 260px; 1149 | } 1150 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'codropsicons'; 5 | src:url('../fonts/codropsicons/codropsicons.eot'); 6 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 8 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 9 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 10 | } 11 | 12 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 13 | .clearfix:before, .clearfix:after {display: table; content: ''; } 14 | .clearfix:after { clear: both; } 15 | 16 | body { 17 | font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; 18 | color: #444; 19 | background: #fff; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | a { 25 | outline: none; 26 | color: #03a9f4; 27 | text-decoration: none; 28 | } 29 | 30 | a:hover, a:focus { 31 | color: #fff; 32 | } 33 | 34 | button:focus { 35 | outline: none; 36 | } 37 | 38 | .container { 39 | display: -webkit-flex; 40 | display: flex; 41 | -webkit-justify-content: center; 42 | justify-content: center; 43 | -webkit-align-items: center; 44 | align-items: center; 45 | -webkit-flex-wrap: wrap; 46 | flex-wrap: wrap; 47 | } 48 | 49 | /* Header */ 50 | .codrops-header { 51 | width: 100%; 52 | padding: 2em 1em 4em; 53 | text-align: center; 54 | color: #fff; 55 | } 56 | 57 | .codrops-header h1 { 58 | margin: 0.5em 0 0; 59 | letter-spacing: -1px; 60 | font-size: 4em; 61 | line-height: 1; 62 | } 63 | 64 | .codrops-header h1 span { 65 | font-weight: normal; 66 | display: block; 67 | margin: 0.5em 0; 68 | font-size: 50%; 69 | letter-spacing: 0; 70 | color: #fffb00; 71 | } 72 | 73 | /* Top Navigation Style */ 74 | .codrops-links { 75 | position: relative; 76 | display: inline-block; 77 | text-align: center; 78 | white-space: nowrap; 79 | font-size: 0.85em; 80 | margin: 1em 0 0 0; 81 | } 82 | 83 | .codrops-links::after { 84 | position: absolute; 85 | top: 0; 86 | left: 50%; 87 | width: 1px; 88 | height: 100%; 89 | background: rgba(0,0,0,0.4); 90 | content: ''; 91 | -webkit-transform: rotate3d(0,0,1,22.5deg); 92 | transform: rotate3d(0,0,1,22.5deg); 93 | } 94 | 95 | .codrops-icon { 96 | display: inline-block; 97 | margin: 0.5em; 98 | padding: 0em 0; 99 | width: 1.5em; 100 | text-decoration: none; 101 | } 102 | 103 | .codrops-icon span { 104 | display: none; 105 | } 106 | 107 | .codrops-icon:before { 108 | margin: 0 5px; 109 | text-transform: none; 110 | font-weight: normal; 111 | font-style: normal; 112 | font-variant: normal; 113 | font-family: 'codropsicons'; 114 | line-height: 1; 115 | 116 | speak: none; 117 | -webkit-font-smoothing: antialiased; 118 | } 119 | 120 | .codrops-icon--drop:before { 121 | content: "\e001"; 122 | } 123 | 124 | .codrops-icon--prev:before { 125 | content: "\e004"; 126 | } 127 | 128 | /* Demo links */ 129 | .codrops-demos { 130 | margin: 2em 0 0; 131 | font-weight: bold; 132 | } 133 | 134 | .codrops-demos a { 135 | display: inline-block; 136 | margin: 0 0.5em; 137 | } 138 | 139 | .codrops-demos a.current-demo { 140 | color: #fff; 141 | } 142 | 143 | /* Content */ 144 | .content { 145 | -webkit-align-self: stretch; 146 | align-self: stretch; 147 | overflow: hidden; 148 | padding: 2em 2em 6em; 149 | width: 50%; 150 | position: relative; 151 | display: -webkit-flex; 152 | display: flex; 153 | -webkit-justify-content: center; 154 | justify-content: center; 155 | -webkit-align-items: center; 156 | align-items: center; 157 | -webkit-flex-direction: column; 158 | flex-direction: column; 159 | } 160 | 161 | .content:nth-child(even):last-child { 162 | width: 100%; 163 | } 164 | 165 | .content__title { 166 | margin: 0 auto 6em 0; 167 | font-size: 1em; 168 | z-index: 100; 169 | position: relative; 170 | color: rgba(0,0,0,0.25); 171 | } 172 | 173 | .color-0 { background: #3f51b5; } 174 | .color-1 { background: #5cc2f1; } 175 | .color-2 { background: #fff59d; } 176 | .color-3 { background: #9993c1; } 177 | .color-4 { background: #e88a63; } 178 | .color-5 { background: #91c794; } 179 | .color-6 { background: #565f77; } 180 | .color-7 { background: #9d62c5; } 181 | .color-8 { background: #EA9292; } 182 | .color-9 { background: #7c79ce; } 183 | 184 | /* Related demos */ 185 | .content--related { 186 | text-align: center; 187 | display: block; 188 | color: #fff; 189 | padding: 5em 1em; 190 | font-size: 1.3em; 191 | } 192 | 193 | .content--related a { 194 | color: #4B4572; 195 | } 196 | 197 | .content--related a:hover, 198 | .content--related a:focus { 199 | color: #fff; 200 | } 201 | 202 | .content--related p { 203 | margin: 2em auto; 204 | } 205 | 206 | .media-item { 207 | display: inline-block; 208 | padding: 1em; 209 | vertical-align: top; 210 | -webkit-transition: color 0.3s; 211 | transition: color 0.3s; 212 | } 213 | 214 | .media-item__img { 215 | max-width: 100%; 216 | opacity: 0.7; 217 | -webkit-transition: opacity 0.3s; 218 | transition: opacity 0.3s; 219 | } 220 | 221 | .media-item:hover .media-item__img, 222 | .media-item:focus .media-item__img { 223 | opacity: 1; 224 | } 225 | 226 | .media-item__title { 227 | margin: 0; 228 | padding: 0.5em; 229 | font-size: 1em; 230 | } 231 | 232 | @media screen and (max-width: 60em) { 233 | .codrops-header h1 { 234 | font-size: 3em; 235 | } 236 | .content { 237 | width: 100%; 238 | } 239 | .content--related { 240 | font-size: 0.9em; 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/favicon.ico -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/css/font-awesome.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); 10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | .fa { 15 | display: inline-block; 16 | font: normal normal normal 14px/1 FontAwesome; 17 | font-size: inherit; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | transform: translate(0, 0); 22 | } 23 | /* makes the font 33% larger relative to the icon container */ 24 | .fa-lg { 25 | font-size: 1.33333333em; 26 | line-height: 0.75em; 27 | vertical-align: -15%; 28 | } 29 | .fa-2x { 30 | font-size: 2em; 31 | } 32 | .fa-3x { 33 | font-size: 3em; 34 | } 35 | .fa-4x { 36 | font-size: 4em; 37 | } 38 | .fa-5x { 39 | font-size: 5em; 40 | } 41 | .fa-fw { 42 | width: 1.28571429em; 43 | text-align: center; 44 | } 45 | .fa-ul { 46 | padding-left: 0; 47 | margin-left: 2.14285714em; 48 | list-style-type: none; 49 | } 50 | .fa-ul > li { 51 | position: relative; 52 | } 53 | .fa-li { 54 | position: absolute; 55 | left: -2.14285714em; 56 | width: 2.14285714em; 57 | top: 0.14285714em; 58 | text-align: center; 59 | } 60 | .fa-li.fa-lg { 61 | left: -1.85714286em; 62 | } 63 | .fa-border { 64 | padding: .2em .25em .15em; 65 | border: solid 0.08em #eeeeee; 66 | border-radius: .1em; 67 | } 68 | .pull-right { 69 | float: right; 70 | } 71 | .pull-left { 72 | float: left; 73 | } 74 | .fa.pull-left { 75 | margin-right: .3em; 76 | } 77 | .fa.pull-right { 78 | margin-left: .3em; 79 | } 80 | .fa-spin { 81 | -webkit-animation: fa-spin 2s infinite linear; 82 | animation: fa-spin 2s infinite linear; 83 | } 84 | .fa-pulse { 85 | -webkit-animation: fa-spin 1s infinite steps(8); 86 | animation: fa-spin 1s infinite steps(8); 87 | } 88 | @-webkit-keyframes fa-spin { 89 | 0% { 90 | -webkit-transform: rotate(0deg); 91 | transform: rotate(0deg); 92 | } 93 | 100% { 94 | -webkit-transform: rotate(359deg); 95 | transform: rotate(359deg); 96 | } 97 | } 98 | @keyframes fa-spin { 99 | 0% { 100 | -webkit-transform: rotate(0deg); 101 | transform: rotate(0deg); 102 | } 103 | 100% { 104 | -webkit-transform: rotate(359deg); 105 | transform: rotate(359deg); 106 | } 107 | } 108 | .fa-rotate-90 { 109 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 110 | -webkit-transform: rotate(90deg); 111 | -ms-transform: rotate(90deg); 112 | transform: rotate(90deg); 113 | } 114 | .fa-rotate-180 { 115 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 116 | -webkit-transform: rotate(180deg); 117 | -ms-transform: rotate(180deg); 118 | transform: rotate(180deg); 119 | } 120 | .fa-rotate-270 { 121 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 122 | -webkit-transform: rotate(270deg); 123 | -ms-transform: rotate(270deg); 124 | transform: rotate(270deg); 125 | } 126 | .fa-flip-horizontal { 127 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 128 | -webkit-transform: scale(-1, 1); 129 | -ms-transform: scale(-1, 1); 130 | transform: scale(-1, 1); 131 | } 132 | .fa-flip-vertical { 133 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 134 | -webkit-transform: scale(1, -1); 135 | -ms-transform: scale(1, -1); 136 | transform: scale(1, -1); 137 | } 138 | :root .fa-rotate-90, 139 | :root .fa-rotate-180, 140 | :root .fa-rotate-270, 141 | :root .fa-flip-horizontal, 142 | :root .fa-flip-vertical { 143 | filter: none; 144 | } 145 | .fa-stack { 146 | position: relative; 147 | display: inline-block; 148 | width: 2em; 149 | height: 2em; 150 | line-height: 2em; 151 | vertical-align: middle; 152 | } 153 | .fa-stack-1x, 154 | .fa-stack-2x { 155 | position: absolute; 156 | left: 0; 157 | width: 100%; 158 | text-align: center; 159 | } 160 | .fa-stack-1x { 161 | line-height: inherit; 162 | } 163 | .fa-stack-2x { 164 | font-size: 2em; 165 | } 166 | .fa-inverse { 167 | color: #ffffff; 168 | } 169 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 170 | readers do not read off random characters that represent icons */ 171 | .fa-glass:before { 172 | content: "\f000"; 173 | } 174 | .fa-music:before { 175 | content: "\f001"; 176 | } 177 | .fa-search:before { 178 | content: "\f002"; 179 | } 180 | .fa-envelope-o:before { 181 | content: "\f003"; 182 | } 183 | .fa-heart:before { 184 | content: "\f004"; 185 | } 186 | .fa-star:before { 187 | content: "\f005"; 188 | } 189 | .fa-star-o:before { 190 | content: "\f006"; 191 | } 192 | .fa-user:before { 193 | content: "\f007"; 194 | } 195 | .fa-film:before { 196 | content: "\f008"; 197 | } 198 | .fa-th-large:before { 199 | content: "\f009"; 200 | } 201 | .fa-th:before { 202 | content: "\f00a"; 203 | } 204 | .fa-th-list:before { 205 | content: "\f00b"; 206 | } 207 | .fa-check:before { 208 | content: "\f00c"; 209 | } 210 | .fa-remove:before, 211 | .fa-close:before, 212 | .fa-times:before { 213 | content: "\f00d"; 214 | } 215 | .fa-search-plus:before { 216 | content: "\f00e"; 217 | } 218 | .fa-search-minus:before { 219 | content: "\f010"; 220 | } 221 | .fa-power-off:before { 222 | content: "\f011"; 223 | } 224 | .fa-signal:before { 225 | content: "\f012"; 226 | } 227 | .fa-gear:before, 228 | .fa-cog:before { 229 | content: "\f013"; 230 | } 231 | .fa-trash-o:before { 232 | content: "\f014"; 233 | } 234 | .fa-home:before { 235 | content: "\f015"; 236 | } 237 | .fa-file-o:before { 238 | content: "\f016"; 239 | } 240 | .fa-clock-o:before { 241 | content: "\f017"; 242 | } 243 | .fa-road:before { 244 | content: "\f018"; 245 | } 246 | .fa-download:before { 247 | content: "\f019"; 248 | } 249 | .fa-arrow-circle-o-down:before { 250 | content: "\f01a"; 251 | } 252 | .fa-arrow-circle-o-up:before { 253 | content: "\f01b"; 254 | } 255 | .fa-inbox:before { 256 | content: "\f01c"; 257 | } 258 | .fa-play-circle-o:before { 259 | content: "\f01d"; 260 | } 261 | .fa-rotate-right:before, 262 | .fa-repeat:before { 263 | content: "\f01e"; 264 | } 265 | .fa-refresh:before { 266 | content: "\f021"; 267 | } 268 | .fa-list-alt:before { 269 | content: "\f022"; 270 | } 271 | .fa-lock:before { 272 | content: "\f023"; 273 | } 274 | .fa-flag:before { 275 | content: "\f024"; 276 | } 277 | .fa-headphones:before { 278 | content: "\f025"; 279 | } 280 | .fa-volume-off:before { 281 | content: "\f026"; 282 | } 283 | .fa-volume-down:before { 284 | content: "\f027"; 285 | } 286 | .fa-volume-up:before { 287 | content: "\f028"; 288 | } 289 | .fa-qrcode:before { 290 | content: "\f029"; 291 | } 292 | .fa-barcode:before { 293 | content: "\f02a"; 294 | } 295 | .fa-tag:before { 296 | content: "\f02b"; 297 | } 298 | .fa-tags:before { 299 | content: "\f02c"; 300 | } 301 | .fa-book:before { 302 | content: "\f02d"; 303 | } 304 | .fa-bookmark:before { 305 | content: "\f02e"; 306 | } 307 | .fa-print:before { 308 | content: "\f02f"; 309 | } 310 | .fa-camera:before { 311 | content: "\f030"; 312 | } 313 | .fa-font:before { 314 | content: "\f031"; 315 | } 316 | .fa-bold:before { 317 | content: "\f032"; 318 | } 319 | .fa-italic:before { 320 | content: "\f033"; 321 | } 322 | .fa-text-height:before { 323 | content: "\f034"; 324 | } 325 | .fa-text-width:before { 326 | content: "\f035"; 327 | } 328 | .fa-align-left:before { 329 | content: "\f036"; 330 | } 331 | .fa-align-center:before { 332 | content: "\f037"; 333 | } 334 | .fa-align-right:before { 335 | content: "\f038"; 336 | } 337 | .fa-align-justify:before { 338 | content: "\f039"; 339 | } 340 | .fa-list:before { 341 | content: "\f03a"; 342 | } 343 | .fa-dedent:before, 344 | .fa-outdent:before { 345 | content: "\f03b"; 346 | } 347 | .fa-indent:before { 348 | content: "\f03c"; 349 | } 350 | .fa-video-camera:before { 351 | content: "\f03d"; 352 | } 353 | .fa-photo:before, 354 | .fa-image:before, 355 | .fa-picture-o:before { 356 | content: "\f03e"; 357 | } 358 | .fa-pencil:before { 359 | content: "\f040"; 360 | } 361 | .fa-map-marker:before { 362 | content: "\f041"; 363 | } 364 | .fa-adjust:before { 365 | content: "\f042"; 366 | } 367 | .fa-tint:before { 368 | content: "\f043"; 369 | } 370 | .fa-edit:before, 371 | .fa-pencil-square-o:before { 372 | content: "\f044"; 373 | } 374 | .fa-share-square-o:before { 375 | content: "\f045"; 376 | } 377 | .fa-check-square-o:before { 378 | content: "\f046"; 379 | } 380 | .fa-arrows:before { 381 | content: "\f047"; 382 | } 383 | .fa-step-backward:before { 384 | content: "\f048"; 385 | } 386 | .fa-fast-backward:before { 387 | content: "\f049"; 388 | } 389 | .fa-backward:before { 390 | content: "\f04a"; 391 | } 392 | .fa-play:before { 393 | content: "\f04b"; 394 | } 395 | .fa-pause:before { 396 | content: "\f04c"; 397 | } 398 | .fa-stop:before { 399 | content: "\f04d"; 400 | } 401 | .fa-forward:before { 402 | content: "\f04e"; 403 | } 404 | .fa-fast-forward:before { 405 | content: "\f050"; 406 | } 407 | .fa-step-forward:before { 408 | content: "\f051"; 409 | } 410 | .fa-eject:before { 411 | content: "\f052"; 412 | } 413 | .fa-chevron-left:before { 414 | content: "\f053"; 415 | } 416 | .fa-chevron-right:before { 417 | content: "\f054"; 418 | } 419 | .fa-plus-circle:before { 420 | content: "\f055"; 421 | } 422 | .fa-minus-circle:before { 423 | content: "\f056"; 424 | } 425 | .fa-times-circle:before { 426 | content: "\f057"; 427 | } 428 | .fa-check-circle:before { 429 | content: "\f058"; 430 | } 431 | .fa-question-circle:before { 432 | content: "\f059"; 433 | } 434 | .fa-info-circle:before { 435 | content: "\f05a"; 436 | } 437 | .fa-crosshairs:before { 438 | content: "\f05b"; 439 | } 440 | .fa-times-circle-o:before { 441 | content: "\f05c"; 442 | } 443 | .fa-check-circle-o:before { 444 | content: "\f05d"; 445 | } 446 | .fa-ban:before { 447 | content: "\f05e"; 448 | } 449 | .fa-arrow-left:before { 450 | content: "\f060"; 451 | } 452 | .fa-arrow-right:before { 453 | content: "\f061"; 454 | } 455 | .fa-arrow-up:before { 456 | content: "\f062"; 457 | } 458 | .fa-arrow-down:before { 459 | content: "\f063"; 460 | } 461 | .fa-mail-forward:before, 462 | .fa-share:before { 463 | content: "\f064"; 464 | } 465 | .fa-expand:before { 466 | content: "\f065"; 467 | } 468 | .fa-compress:before { 469 | content: "\f066"; 470 | } 471 | .fa-plus:before { 472 | content: "\f067"; 473 | } 474 | .fa-minus:before { 475 | content: "\f068"; 476 | } 477 | .fa-asterisk:before { 478 | content: "\f069"; 479 | } 480 | .fa-exclamation-circle:before { 481 | content: "\f06a"; 482 | } 483 | .fa-gift:before { 484 | content: "\f06b"; 485 | } 486 | .fa-leaf:before { 487 | content: "\f06c"; 488 | } 489 | .fa-fire:before { 490 | content: "\f06d"; 491 | } 492 | .fa-eye:before { 493 | content: "\f06e"; 494 | } 495 | .fa-eye-slash:before { 496 | content: "\f070"; 497 | } 498 | .fa-warning:before, 499 | .fa-exclamation-triangle:before { 500 | content: "\f071"; 501 | } 502 | .fa-plane:before { 503 | content: "\f072"; 504 | } 505 | .fa-calendar:before { 506 | content: "\f073"; 507 | } 508 | .fa-random:before { 509 | content: "\f074"; 510 | } 511 | .fa-comment:before { 512 | content: "\f075"; 513 | } 514 | .fa-magnet:before { 515 | content: "\f076"; 516 | } 517 | .fa-chevron-up:before { 518 | content: "\f077"; 519 | } 520 | .fa-chevron-down:before { 521 | content: "\f078"; 522 | } 523 | .fa-retweet:before { 524 | content: "\f079"; 525 | } 526 | .fa-shopping-cart:before { 527 | content: "\f07a"; 528 | } 529 | .fa-folder:before { 530 | content: "\f07b"; 531 | } 532 | .fa-folder-open:before { 533 | content: "\f07c"; 534 | } 535 | .fa-arrows-v:before { 536 | content: "\f07d"; 537 | } 538 | .fa-arrows-h:before { 539 | content: "\f07e"; 540 | } 541 | .fa-bar-chart-o:before, 542 | .fa-bar-chart:before { 543 | content: "\f080"; 544 | } 545 | .fa-twitter-square:before { 546 | content: "\f081"; 547 | } 548 | .fa-facebook-square:before { 549 | content: "\f082"; 550 | } 551 | .fa-camera-retro:before { 552 | content: "\f083"; 553 | } 554 | .fa-key:before { 555 | content: "\f084"; 556 | } 557 | .fa-gears:before, 558 | .fa-cogs:before { 559 | content: "\f085"; 560 | } 561 | .fa-comments:before { 562 | content: "\f086"; 563 | } 564 | .fa-thumbs-o-up:before { 565 | content: "\f087"; 566 | } 567 | .fa-thumbs-o-down:before { 568 | content: "\f088"; 569 | } 570 | .fa-star-half:before { 571 | content: "\f089"; 572 | } 573 | .fa-heart-o:before { 574 | content: "\f08a"; 575 | } 576 | .fa-sign-out:before { 577 | content: "\f08b"; 578 | } 579 | .fa-linkedin-square:before { 580 | content: "\f08c"; 581 | } 582 | .fa-thumb-tack:before { 583 | content: "\f08d"; 584 | } 585 | .fa-external-link:before { 586 | content: "\f08e"; 587 | } 588 | .fa-sign-in:before { 589 | content: "\f090"; 590 | } 591 | .fa-trophy:before { 592 | content: "\f091"; 593 | } 594 | .fa-github-square:before { 595 | content: "\f092"; 596 | } 597 | .fa-upload:before { 598 | content: "\f093"; 599 | } 600 | .fa-lemon-o:before { 601 | content: "\f094"; 602 | } 603 | .fa-phone:before { 604 | content: "\f095"; 605 | } 606 | .fa-square-o:before { 607 | content: "\f096"; 608 | } 609 | .fa-bookmark-o:before { 610 | content: "\f097"; 611 | } 612 | .fa-phone-square:before { 613 | content: "\f098"; 614 | } 615 | .fa-twitter:before { 616 | content: "\f099"; 617 | } 618 | .fa-facebook-f:before, 619 | .fa-facebook:before { 620 | content: "\f09a"; 621 | } 622 | .fa-github:before { 623 | content: "\f09b"; 624 | } 625 | .fa-unlock:before { 626 | content: "\f09c"; 627 | } 628 | .fa-credit-card:before { 629 | content: "\f09d"; 630 | } 631 | .fa-rss:before { 632 | content: "\f09e"; 633 | } 634 | .fa-hdd-o:before { 635 | content: "\f0a0"; 636 | } 637 | .fa-bullhorn:before { 638 | content: "\f0a1"; 639 | } 640 | .fa-bell:before { 641 | content: "\f0f3"; 642 | } 643 | .fa-certificate:before { 644 | content: "\f0a3"; 645 | } 646 | .fa-hand-o-right:before { 647 | content: "\f0a4"; 648 | } 649 | .fa-hand-o-left:before { 650 | content: "\f0a5"; 651 | } 652 | .fa-hand-o-up:before { 653 | content: "\f0a6"; 654 | } 655 | .fa-hand-o-down:before { 656 | content: "\f0a7"; 657 | } 658 | .fa-arrow-circle-left:before { 659 | content: "\f0a8"; 660 | } 661 | .fa-arrow-circle-right:before { 662 | content: "\f0a9"; 663 | } 664 | .fa-arrow-circle-up:before { 665 | content: "\f0aa"; 666 | } 667 | .fa-arrow-circle-down:before { 668 | content: "\f0ab"; 669 | } 670 | .fa-globe:before { 671 | content: "\f0ac"; 672 | } 673 | .fa-wrench:before { 674 | content: "\f0ad"; 675 | } 676 | .fa-tasks:before { 677 | content: "\f0ae"; 678 | } 679 | .fa-filter:before { 680 | content: "\f0b0"; 681 | } 682 | .fa-briefcase:before { 683 | content: "\f0b1"; 684 | } 685 | .fa-arrows-alt:before { 686 | content: "\f0b2"; 687 | } 688 | .fa-group:before, 689 | .fa-users:before { 690 | content: "\f0c0"; 691 | } 692 | .fa-chain:before, 693 | .fa-link:before { 694 | content: "\f0c1"; 695 | } 696 | .fa-cloud:before { 697 | content: "\f0c2"; 698 | } 699 | .fa-flask:before { 700 | content: "\f0c3"; 701 | } 702 | .fa-cut:before, 703 | .fa-scissors:before { 704 | content: "\f0c4"; 705 | } 706 | .fa-copy:before, 707 | .fa-files-o:before { 708 | content: "\f0c5"; 709 | } 710 | .fa-paperclip:before { 711 | content: "\f0c6"; 712 | } 713 | .fa-save:before, 714 | .fa-floppy-o:before { 715 | content: "\f0c7"; 716 | } 717 | .fa-square:before { 718 | content: "\f0c8"; 719 | } 720 | .fa-navicon:before, 721 | .fa-reorder:before, 722 | .fa-bars:before { 723 | content: "\f0c9"; 724 | } 725 | .fa-list-ul:before { 726 | content: "\f0ca"; 727 | } 728 | .fa-list-ol:before { 729 | content: "\f0cb"; 730 | } 731 | .fa-strikethrough:before { 732 | content: "\f0cc"; 733 | } 734 | .fa-underline:before { 735 | content: "\f0cd"; 736 | } 737 | .fa-table:before { 738 | content: "\f0ce"; 739 | } 740 | .fa-magic:before { 741 | content: "\f0d0"; 742 | } 743 | .fa-truck:before { 744 | content: "\f0d1"; 745 | } 746 | .fa-pinterest:before { 747 | content: "\f0d2"; 748 | } 749 | .fa-pinterest-square:before { 750 | content: "\f0d3"; 751 | } 752 | .fa-google-plus-square:before { 753 | content: "\f0d4"; 754 | } 755 | .fa-google-plus:before { 756 | content: "\f0d5"; 757 | } 758 | .fa-money:before { 759 | content: "\f0d6"; 760 | } 761 | .fa-caret-down:before { 762 | content: "\f0d7"; 763 | } 764 | .fa-caret-up:before { 765 | content: "\f0d8"; 766 | } 767 | .fa-caret-left:before { 768 | content: "\f0d9"; 769 | } 770 | .fa-caret-right:before { 771 | content: "\f0da"; 772 | } 773 | .fa-columns:before { 774 | content: "\f0db"; 775 | } 776 | .fa-unsorted:before, 777 | .fa-sort:before { 778 | content: "\f0dc"; 779 | } 780 | .fa-sort-down:before, 781 | .fa-sort-desc:before { 782 | content: "\f0dd"; 783 | } 784 | .fa-sort-up:before, 785 | .fa-sort-asc:before { 786 | content: "\f0de"; 787 | } 788 | .fa-envelope:before { 789 | content: "\f0e0"; 790 | } 791 | .fa-linkedin:before { 792 | content: "\f0e1"; 793 | } 794 | .fa-rotate-left:before, 795 | .fa-undo:before { 796 | content: "\f0e2"; 797 | } 798 | .fa-legal:before, 799 | .fa-gavel:before { 800 | content: "\f0e3"; 801 | } 802 | .fa-dashboard:before, 803 | .fa-tachometer:before { 804 | content: "\f0e4"; 805 | } 806 | .fa-comment-o:before { 807 | content: "\f0e5"; 808 | } 809 | .fa-comments-o:before { 810 | content: "\f0e6"; 811 | } 812 | .fa-flash:before, 813 | .fa-bolt:before { 814 | content: "\f0e7"; 815 | } 816 | .fa-sitemap:before { 817 | content: "\f0e8"; 818 | } 819 | .fa-umbrella:before { 820 | content: "\f0e9"; 821 | } 822 | .fa-paste:before, 823 | .fa-clipboard:before { 824 | content: "\f0ea"; 825 | } 826 | .fa-lightbulb-o:before { 827 | content: "\f0eb"; 828 | } 829 | .fa-exchange:before { 830 | content: "\f0ec"; 831 | } 832 | .fa-cloud-download:before { 833 | content: "\f0ed"; 834 | } 835 | .fa-cloud-upload:before { 836 | content: "\f0ee"; 837 | } 838 | .fa-user-md:before { 839 | content: "\f0f0"; 840 | } 841 | .fa-stethoscope:before { 842 | content: "\f0f1"; 843 | } 844 | .fa-suitcase:before { 845 | content: "\f0f2"; 846 | } 847 | .fa-bell-o:before { 848 | content: "\f0a2"; 849 | } 850 | .fa-coffee:before { 851 | content: "\f0f4"; 852 | } 853 | .fa-cutlery:before { 854 | content: "\f0f5"; 855 | } 856 | .fa-file-text-o:before { 857 | content: "\f0f6"; 858 | } 859 | .fa-building-o:before { 860 | content: "\f0f7"; 861 | } 862 | .fa-hospital-o:before { 863 | content: "\f0f8"; 864 | } 865 | .fa-ambulance:before { 866 | content: "\f0f9"; 867 | } 868 | .fa-medkit:before { 869 | content: "\f0fa"; 870 | } 871 | .fa-fighter-jet:before { 872 | content: "\f0fb"; 873 | } 874 | .fa-beer:before { 875 | content: "\f0fc"; 876 | } 877 | .fa-h-square:before { 878 | content: "\f0fd"; 879 | } 880 | .fa-plus-square:before { 881 | content: "\f0fe"; 882 | } 883 | .fa-angle-double-left:before { 884 | content: "\f100"; 885 | } 886 | .fa-angle-double-right:before { 887 | content: "\f101"; 888 | } 889 | .fa-angle-double-up:before { 890 | content: "\f102"; 891 | } 892 | .fa-angle-double-down:before { 893 | content: "\f103"; 894 | } 895 | .fa-angle-left:before { 896 | content: "\f104"; 897 | } 898 | .fa-angle-right:before { 899 | content: "\f105"; 900 | } 901 | .fa-angle-up:before { 902 | content: "\f106"; 903 | } 904 | .fa-angle-down:before { 905 | content: "\f107"; 906 | } 907 | .fa-desktop:before { 908 | content: "\f108"; 909 | } 910 | .fa-laptop:before { 911 | content: "\f109"; 912 | } 913 | .fa-tablet:before { 914 | content: "\f10a"; 915 | } 916 | .fa-mobile-phone:before, 917 | .fa-mobile:before { 918 | content: "\f10b"; 919 | } 920 | .fa-circle-o:before { 921 | content: "\f10c"; 922 | } 923 | .fa-quote-left:before { 924 | content: "\f10d"; 925 | } 926 | .fa-quote-right:before { 927 | content: "\f10e"; 928 | } 929 | .fa-spinner:before { 930 | content: "\f110"; 931 | } 932 | .fa-circle:before { 933 | content: "\f111"; 934 | } 935 | .fa-mail-reply:before, 936 | .fa-reply:before { 937 | content: "\f112"; 938 | } 939 | .fa-github-alt:before { 940 | content: "\f113"; 941 | } 942 | .fa-folder-o:before { 943 | content: "\f114"; 944 | } 945 | .fa-folder-open-o:before { 946 | content: "\f115"; 947 | } 948 | .fa-smile-o:before { 949 | content: "\f118"; 950 | } 951 | .fa-frown-o:before { 952 | content: "\f119"; 953 | } 954 | .fa-meh-o:before { 955 | content: "\f11a"; 956 | } 957 | .fa-gamepad:before { 958 | content: "\f11b"; 959 | } 960 | .fa-keyboard-o:before { 961 | content: "\f11c"; 962 | } 963 | .fa-flag-o:before { 964 | content: "\f11d"; 965 | } 966 | .fa-flag-checkered:before { 967 | content: "\f11e"; 968 | } 969 | .fa-terminal:before { 970 | content: "\f120"; 971 | } 972 | .fa-code:before { 973 | content: "\f121"; 974 | } 975 | .fa-mail-reply-all:before, 976 | .fa-reply-all:before { 977 | content: "\f122"; 978 | } 979 | .fa-star-half-empty:before, 980 | .fa-star-half-full:before, 981 | .fa-star-half-o:before { 982 | content: "\f123"; 983 | } 984 | .fa-location-arrow:before { 985 | content: "\f124"; 986 | } 987 | .fa-crop:before { 988 | content: "\f125"; 989 | } 990 | .fa-code-fork:before { 991 | content: "\f126"; 992 | } 993 | .fa-unlink:before, 994 | .fa-chain-broken:before { 995 | content: "\f127"; 996 | } 997 | .fa-question:before { 998 | content: "\f128"; 999 | } 1000 | .fa-info:before { 1001 | content: "\f129"; 1002 | } 1003 | .fa-exclamation:before { 1004 | content: "\f12a"; 1005 | } 1006 | .fa-superscript:before { 1007 | content: "\f12b"; 1008 | } 1009 | .fa-subscript:before { 1010 | content: "\f12c"; 1011 | } 1012 | .fa-eraser:before { 1013 | content: "\f12d"; 1014 | } 1015 | .fa-puzzle-piece:before { 1016 | content: "\f12e"; 1017 | } 1018 | .fa-microphone:before { 1019 | content: "\f130"; 1020 | } 1021 | .fa-microphone-slash:before { 1022 | content: "\f131"; 1023 | } 1024 | .fa-shield:before { 1025 | content: "\f132"; 1026 | } 1027 | .fa-calendar-o:before { 1028 | content: "\f133"; 1029 | } 1030 | .fa-fire-extinguisher:before { 1031 | content: "\f134"; 1032 | } 1033 | .fa-rocket:before { 1034 | content: "\f135"; 1035 | } 1036 | .fa-maxcdn:before { 1037 | content: "\f136"; 1038 | } 1039 | .fa-chevron-circle-left:before { 1040 | content: "\f137"; 1041 | } 1042 | .fa-chevron-circle-right:before { 1043 | content: "\f138"; 1044 | } 1045 | .fa-chevron-circle-up:before { 1046 | content: "\f139"; 1047 | } 1048 | .fa-chevron-circle-down:before { 1049 | content: "\f13a"; 1050 | } 1051 | .fa-html5:before { 1052 | content: "\f13b"; 1053 | } 1054 | .fa-css3:before { 1055 | content: "\f13c"; 1056 | } 1057 | .fa-anchor:before { 1058 | content: "\f13d"; 1059 | } 1060 | .fa-unlock-alt:before { 1061 | content: "\f13e"; 1062 | } 1063 | .fa-bullseye:before { 1064 | content: "\f140"; 1065 | } 1066 | .fa-ellipsis-h:before { 1067 | content: "\f141"; 1068 | } 1069 | .fa-ellipsis-v:before { 1070 | content: "\f142"; 1071 | } 1072 | .fa-rss-square:before { 1073 | content: "\f143"; 1074 | } 1075 | .fa-play-circle:before { 1076 | content: "\f144"; 1077 | } 1078 | .fa-ticket:before { 1079 | content: "\f145"; 1080 | } 1081 | .fa-minus-square:before { 1082 | content: "\f146"; 1083 | } 1084 | .fa-minus-square-o:before { 1085 | content: "\f147"; 1086 | } 1087 | .fa-level-up:before { 1088 | content: "\f148"; 1089 | } 1090 | .fa-level-down:before { 1091 | content: "\f149"; 1092 | } 1093 | .fa-check-square:before { 1094 | content: "\f14a"; 1095 | } 1096 | .fa-pencil-square:before { 1097 | content: "\f14b"; 1098 | } 1099 | .fa-external-link-square:before { 1100 | content: "\f14c"; 1101 | } 1102 | .fa-share-square:before { 1103 | content: "\f14d"; 1104 | } 1105 | .fa-compass:before { 1106 | content: "\f14e"; 1107 | } 1108 | .fa-toggle-down:before, 1109 | .fa-caret-square-o-down:before { 1110 | content: "\f150"; 1111 | } 1112 | .fa-toggle-up:before, 1113 | .fa-caret-square-o-up:before { 1114 | content: "\f151"; 1115 | } 1116 | .fa-toggle-right:before, 1117 | .fa-caret-square-o-right:before { 1118 | content: "\f152"; 1119 | } 1120 | .fa-euro:before, 1121 | .fa-eur:before { 1122 | content: "\f153"; 1123 | } 1124 | .fa-gbp:before { 1125 | content: "\f154"; 1126 | } 1127 | .fa-dollar:before, 1128 | .fa-usd:before { 1129 | content: "\f155"; 1130 | } 1131 | .fa-rupee:before, 1132 | .fa-inr:before { 1133 | content: "\f156"; 1134 | } 1135 | .fa-cny:before, 1136 | .fa-rmb:before, 1137 | .fa-yen:before, 1138 | .fa-jpy:before { 1139 | content: "\f157"; 1140 | } 1141 | .fa-ruble:before, 1142 | .fa-rouble:before, 1143 | .fa-rub:before { 1144 | content: "\f158"; 1145 | } 1146 | .fa-won:before, 1147 | .fa-krw:before { 1148 | content: "\f159"; 1149 | } 1150 | .fa-bitcoin:before, 1151 | .fa-btc:before { 1152 | content: "\f15a"; 1153 | } 1154 | .fa-file:before { 1155 | content: "\f15b"; 1156 | } 1157 | .fa-file-text:before { 1158 | content: "\f15c"; 1159 | } 1160 | .fa-sort-alpha-asc:before { 1161 | content: "\f15d"; 1162 | } 1163 | .fa-sort-alpha-desc:before { 1164 | content: "\f15e"; 1165 | } 1166 | .fa-sort-amount-asc:before { 1167 | content: "\f160"; 1168 | } 1169 | .fa-sort-amount-desc:before { 1170 | content: "\f161"; 1171 | } 1172 | .fa-sort-numeric-asc:before { 1173 | content: "\f162"; 1174 | } 1175 | .fa-sort-numeric-desc:before { 1176 | content: "\f163"; 1177 | } 1178 | .fa-thumbs-up:before { 1179 | content: "\f164"; 1180 | } 1181 | .fa-thumbs-down:before { 1182 | content: "\f165"; 1183 | } 1184 | .fa-youtube-square:before { 1185 | content: "\f166"; 1186 | } 1187 | .fa-youtube:before { 1188 | content: "\f167"; 1189 | } 1190 | .fa-xing:before { 1191 | content: "\f168"; 1192 | } 1193 | .fa-xing-square:before { 1194 | content: "\f169"; 1195 | } 1196 | .fa-youtube-play:before { 1197 | content: "\f16a"; 1198 | } 1199 | .fa-dropbox:before { 1200 | content: "\f16b"; 1201 | } 1202 | .fa-stack-overflow:before { 1203 | content: "\f16c"; 1204 | } 1205 | .fa-instagram:before { 1206 | content: "\f16d"; 1207 | } 1208 | .fa-flickr:before { 1209 | content: "\f16e"; 1210 | } 1211 | .fa-adn:before { 1212 | content: "\f170"; 1213 | } 1214 | .fa-bitbucket:before { 1215 | content: "\f171"; 1216 | } 1217 | .fa-bitbucket-square:before { 1218 | content: "\f172"; 1219 | } 1220 | .fa-tumblr:before { 1221 | content: "\f173"; 1222 | } 1223 | .fa-tumblr-square:before { 1224 | content: "\f174"; 1225 | } 1226 | .fa-long-arrow-down:before { 1227 | content: "\f175"; 1228 | } 1229 | .fa-long-arrow-up:before { 1230 | content: "\f176"; 1231 | } 1232 | .fa-long-arrow-left:before { 1233 | content: "\f177"; 1234 | } 1235 | .fa-long-arrow-right:before { 1236 | content: "\f178"; 1237 | } 1238 | .fa-apple:before { 1239 | content: "\f179"; 1240 | } 1241 | .fa-windows:before { 1242 | content: "\f17a"; 1243 | } 1244 | .fa-android:before { 1245 | content: "\f17b"; 1246 | } 1247 | .fa-linux:before { 1248 | content: "\f17c"; 1249 | } 1250 | .fa-dribbble:before { 1251 | content: "\f17d"; 1252 | } 1253 | .fa-skype:before { 1254 | content: "\f17e"; 1255 | } 1256 | .fa-foursquare:before { 1257 | content: "\f180"; 1258 | } 1259 | .fa-trello:before { 1260 | content: "\f181"; 1261 | } 1262 | .fa-female:before { 1263 | content: "\f182"; 1264 | } 1265 | .fa-male:before { 1266 | content: "\f183"; 1267 | } 1268 | .fa-gittip:before, 1269 | .fa-gratipay:before { 1270 | content: "\f184"; 1271 | } 1272 | .fa-sun-o:before { 1273 | content: "\f185"; 1274 | } 1275 | .fa-moon-o:before { 1276 | content: "\f186"; 1277 | } 1278 | .fa-archive:before { 1279 | content: "\f187"; 1280 | } 1281 | .fa-bug:before { 1282 | content: "\f188"; 1283 | } 1284 | .fa-vk:before { 1285 | content: "\f189"; 1286 | } 1287 | .fa-weibo:before { 1288 | content: "\f18a"; 1289 | } 1290 | .fa-renren:before { 1291 | content: "\f18b"; 1292 | } 1293 | .fa-pagelines:before { 1294 | content: "\f18c"; 1295 | } 1296 | .fa-stack-exchange:before { 1297 | content: "\f18d"; 1298 | } 1299 | .fa-arrow-circle-o-right:before { 1300 | content: "\f18e"; 1301 | } 1302 | .fa-arrow-circle-o-left:before { 1303 | content: "\f190"; 1304 | } 1305 | .fa-toggle-left:before, 1306 | .fa-caret-square-o-left:before { 1307 | content: "\f191"; 1308 | } 1309 | .fa-dot-circle-o:before { 1310 | content: "\f192"; 1311 | } 1312 | .fa-wheelchair:before { 1313 | content: "\f193"; 1314 | } 1315 | .fa-vimeo-square:before { 1316 | content: "\f194"; 1317 | } 1318 | .fa-turkish-lira:before, 1319 | .fa-try:before { 1320 | content: "\f195"; 1321 | } 1322 | .fa-plus-square-o:before { 1323 | content: "\f196"; 1324 | } 1325 | .fa-space-shuttle:before { 1326 | content: "\f197"; 1327 | } 1328 | .fa-slack:before { 1329 | content: "\f198"; 1330 | } 1331 | .fa-envelope-square:before { 1332 | content: "\f199"; 1333 | } 1334 | .fa-wordpress:before { 1335 | content: "\f19a"; 1336 | } 1337 | .fa-openid:before { 1338 | content: "\f19b"; 1339 | } 1340 | .fa-institution:before, 1341 | .fa-bank:before, 1342 | .fa-university:before { 1343 | content: "\f19c"; 1344 | } 1345 | .fa-mortar-board:before, 1346 | .fa-graduation-cap:before { 1347 | content: "\f19d"; 1348 | } 1349 | .fa-yahoo:before { 1350 | content: "\f19e"; 1351 | } 1352 | .fa-google:before { 1353 | content: "\f1a0"; 1354 | } 1355 | .fa-reddit:before { 1356 | content: "\f1a1"; 1357 | } 1358 | .fa-reddit-square:before { 1359 | content: "\f1a2"; 1360 | } 1361 | .fa-stumbleupon-circle:before { 1362 | content: "\f1a3"; 1363 | } 1364 | .fa-stumbleupon:before { 1365 | content: "\f1a4"; 1366 | } 1367 | .fa-delicious:before { 1368 | content: "\f1a5"; 1369 | } 1370 | .fa-digg:before { 1371 | content: "\f1a6"; 1372 | } 1373 | .fa-pied-piper:before { 1374 | content: "\f1a7"; 1375 | } 1376 | .fa-pied-piper-alt:before { 1377 | content: "\f1a8"; 1378 | } 1379 | .fa-drupal:before { 1380 | content: "\f1a9"; 1381 | } 1382 | .fa-joomla:before { 1383 | content: "\f1aa"; 1384 | } 1385 | .fa-language:before { 1386 | content: "\f1ab"; 1387 | } 1388 | .fa-fax:before { 1389 | content: "\f1ac"; 1390 | } 1391 | .fa-building:before { 1392 | content: "\f1ad"; 1393 | } 1394 | .fa-child:before { 1395 | content: "\f1ae"; 1396 | } 1397 | .fa-paw:before { 1398 | content: "\f1b0"; 1399 | } 1400 | .fa-spoon:before { 1401 | content: "\f1b1"; 1402 | } 1403 | .fa-cube:before { 1404 | content: "\f1b2"; 1405 | } 1406 | .fa-cubes:before { 1407 | content: "\f1b3"; 1408 | } 1409 | .fa-behance:before { 1410 | content: "\f1b4"; 1411 | } 1412 | .fa-behance-square:before { 1413 | content: "\f1b5"; 1414 | } 1415 | .fa-steam:before { 1416 | content: "\f1b6"; 1417 | } 1418 | .fa-steam-square:before { 1419 | content: "\f1b7"; 1420 | } 1421 | .fa-recycle:before { 1422 | content: "\f1b8"; 1423 | } 1424 | .fa-automobile:before, 1425 | .fa-car:before { 1426 | content: "\f1b9"; 1427 | } 1428 | .fa-cab:before, 1429 | .fa-taxi:before { 1430 | content: "\f1ba"; 1431 | } 1432 | .fa-tree:before { 1433 | content: "\f1bb"; 1434 | } 1435 | .fa-spotify:before { 1436 | content: "\f1bc"; 1437 | } 1438 | .fa-deviantart:before { 1439 | content: "\f1bd"; 1440 | } 1441 | .fa-soundcloud:before { 1442 | content: "\f1be"; 1443 | } 1444 | .fa-database:before { 1445 | content: "\f1c0"; 1446 | } 1447 | .fa-file-pdf-o:before { 1448 | content: "\f1c1"; 1449 | } 1450 | .fa-file-word-o:before { 1451 | content: "\f1c2"; 1452 | } 1453 | .fa-file-excel-o:before { 1454 | content: "\f1c3"; 1455 | } 1456 | .fa-file-powerpoint-o:before { 1457 | content: "\f1c4"; 1458 | } 1459 | .fa-file-photo-o:before, 1460 | .fa-file-picture-o:before, 1461 | .fa-file-image-o:before { 1462 | content: "\f1c5"; 1463 | } 1464 | .fa-file-zip-o:before, 1465 | .fa-file-archive-o:before { 1466 | content: "\f1c6"; 1467 | } 1468 | .fa-file-sound-o:before, 1469 | .fa-file-audio-o:before { 1470 | content: "\f1c7"; 1471 | } 1472 | .fa-file-movie-o:before, 1473 | .fa-file-video-o:before { 1474 | content: "\f1c8"; 1475 | } 1476 | .fa-file-code-o:before { 1477 | content: "\f1c9"; 1478 | } 1479 | .fa-vine:before { 1480 | content: "\f1ca"; 1481 | } 1482 | .fa-codepen:before { 1483 | content: "\f1cb"; 1484 | } 1485 | .fa-jsfiddle:before { 1486 | content: "\f1cc"; 1487 | } 1488 | .fa-life-bouy:before, 1489 | .fa-life-buoy:before, 1490 | .fa-life-saver:before, 1491 | .fa-support:before, 1492 | .fa-life-ring:before { 1493 | content: "\f1cd"; 1494 | } 1495 | .fa-circle-o-notch:before { 1496 | content: "\f1ce"; 1497 | } 1498 | .fa-ra:before, 1499 | .fa-rebel:before { 1500 | content: "\f1d0"; 1501 | } 1502 | .fa-ge:before, 1503 | .fa-empire:before { 1504 | content: "\f1d1"; 1505 | } 1506 | .fa-git-square:before { 1507 | content: "\f1d2"; 1508 | } 1509 | .fa-git:before { 1510 | content: "\f1d3"; 1511 | } 1512 | .fa-hacker-news:before { 1513 | content: "\f1d4"; 1514 | } 1515 | .fa-tencent-weibo:before { 1516 | content: "\f1d5"; 1517 | } 1518 | .fa-qq:before { 1519 | content: "\f1d6"; 1520 | } 1521 | .fa-wechat:before, 1522 | .fa-weixin:before { 1523 | content: "\f1d7"; 1524 | } 1525 | .fa-send:before, 1526 | .fa-paper-plane:before { 1527 | content: "\f1d8"; 1528 | } 1529 | .fa-send-o:before, 1530 | .fa-paper-plane-o:before { 1531 | content: "\f1d9"; 1532 | } 1533 | .fa-history:before { 1534 | content: "\f1da"; 1535 | } 1536 | .fa-genderless:before, 1537 | .fa-circle-thin:before { 1538 | content: "\f1db"; 1539 | } 1540 | .fa-header:before { 1541 | content: "\f1dc"; 1542 | } 1543 | .fa-paragraph:before { 1544 | content: "\f1dd"; 1545 | } 1546 | .fa-sliders:before { 1547 | content: "\f1de"; 1548 | } 1549 | .fa-share-alt:before { 1550 | content: "\f1e0"; 1551 | } 1552 | .fa-share-alt-square:before { 1553 | content: "\f1e1"; 1554 | } 1555 | .fa-bomb:before { 1556 | content: "\f1e2"; 1557 | } 1558 | .fa-soccer-ball-o:before, 1559 | .fa-futbol-o:before { 1560 | content: "\f1e3"; 1561 | } 1562 | .fa-tty:before { 1563 | content: "\f1e4"; 1564 | } 1565 | .fa-binoculars:before { 1566 | content: "\f1e5"; 1567 | } 1568 | .fa-plug:before { 1569 | content: "\f1e6"; 1570 | } 1571 | .fa-slideshare:before { 1572 | content: "\f1e7"; 1573 | } 1574 | .fa-twitch:before { 1575 | content: "\f1e8"; 1576 | } 1577 | .fa-yelp:before { 1578 | content: "\f1e9"; 1579 | } 1580 | .fa-newspaper-o:before { 1581 | content: "\f1ea"; 1582 | } 1583 | .fa-wifi:before { 1584 | content: "\f1eb"; 1585 | } 1586 | .fa-calculator:before { 1587 | content: "\f1ec"; 1588 | } 1589 | .fa-paypal:before { 1590 | content: "\f1ed"; 1591 | } 1592 | .fa-google-wallet:before { 1593 | content: "\f1ee"; 1594 | } 1595 | .fa-cc-visa:before { 1596 | content: "\f1f0"; 1597 | } 1598 | .fa-cc-mastercard:before { 1599 | content: "\f1f1"; 1600 | } 1601 | .fa-cc-discover:before { 1602 | content: "\f1f2"; 1603 | } 1604 | .fa-cc-amex:before { 1605 | content: "\f1f3"; 1606 | } 1607 | .fa-cc-paypal:before { 1608 | content: "\f1f4"; 1609 | } 1610 | .fa-cc-stripe:before { 1611 | content: "\f1f5"; 1612 | } 1613 | .fa-bell-slash:before { 1614 | content: "\f1f6"; 1615 | } 1616 | .fa-bell-slash-o:before { 1617 | content: "\f1f7"; 1618 | } 1619 | .fa-trash:before { 1620 | content: "\f1f8"; 1621 | } 1622 | .fa-copyright:before { 1623 | content: "\f1f9"; 1624 | } 1625 | .fa-at:before { 1626 | content: "\f1fa"; 1627 | } 1628 | .fa-eyedropper:before { 1629 | content: "\f1fb"; 1630 | } 1631 | .fa-paint-brush:before { 1632 | content: "\f1fc"; 1633 | } 1634 | .fa-birthday-cake:before { 1635 | content: "\f1fd"; 1636 | } 1637 | .fa-area-chart:before { 1638 | content: "\f1fe"; 1639 | } 1640 | .fa-pie-chart:before { 1641 | content: "\f200"; 1642 | } 1643 | .fa-line-chart:before { 1644 | content: "\f201"; 1645 | } 1646 | .fa-lastfm:before { 1647 | content: "\f202"; 1648 | } 1649 | .fa-lastfm-square:before { 1650 | content: "\f203"; 1651 | } 1652 | .fa-toggle-off:before { 1653 | content: "\f204"; 1654 | } 1655 | .fa-toggle-on:before { 1656 | content: "\f205"; 1657 | } 1658 | .fa-bicycle:before { 1659 | content: "\f206"; 1660 | } 1661 | .fa-bus:before { 1662 | content: "\f207"; 1663 | } 1664 | .fa-ioxhost:before { 1665 | content: "\f208"; 1666 | } 1667 | .fa-angellist:before { 1668 | content: "\f209"; 1669 | } 1670 | .fa-cc:before { 1671 | content: "\f20a"; 1672 | } 1673 | .fa-shekel:before, 1674 | .fa-sheqel:before, 1675 | .fa-ils:before { 1676 | content: "\f20b"; 1677 | } 1678 | .fa-meanpath:before { 1679 | content: "\f20c"; 1680 | } 1681 | .fa-buysellads:before { 1682 | content: "\f20d"; 1683 | } 1684 | .fa-connectdevelop:before { 1685 | content: "\f20e"; 1686 | } 1687 | .fa-dashcube:before { 1688 | content: "\f210"; 1689 | } 1690 | .fa-forumbee:before { 1691 | content: "\f211"; 1692 | } 1693 | .fa-leanpub:before { 1694 | content: "\f212"; 1695 | } 1696 | .fa-sellsy:before { 1697 | content: "\f213"; 1698 | } 1699 | .fa-shirtsinbulk:before { 1700 | content: "\f214"; 1701 | } 1702 | .fa-simplybuilt:before { 1703 | content: "\f215"; 1704 | } 1705 | .fa-skyatlas:before { 1706 | content: "\f216"; 1707 | } 1708 | .fa-cart-plus:before { 1709 | content: "\f217"; 1710 | } 1711 | .fa-cart-arrow-down:before { 1712 | content: "\f218"; 1713 | } 1714 | .fa-diamond:before { 1715 | content: "\f219"; 1716 | } 1717 | .fa-ship:before { 1718 | content: "\f21a"; 1719 | } 1720 | .fa-user-secret:before { 1721 | content: "\f21b"; 1722 | } 1723 | .fa-motorcycle:before { 1724 | content: "\f21c"; 1725 | } 1726 | .fa-street-view:before { 1727 | content: "\f21d"; 1728 | } 1729 | .fa-heartbeat:before { 1730 | content: "\f21e"; 1731 | } 1732 | .fa-venus:before { 1733 | content: "\f221"; 1734 | } 1735 | .fa-mars:before { 1736 | content: "\f222"; 1737 | } 1738 | .fa-mercury:before { 1739 | content: "\f223"; 1740 | } 1741 | .fa-transgender:before { 1742 | content: "\f224"; 1743 | } 1744 | .fa-transgender-alt:before { 1745 | content: "\f225"; 1746 | } 1747 | .fa-venus-double:before { 1748 | content: "\f226"; 1749 | } 1750 | .fa-mars-double:before { 1751 | content: "\f227"; 1752 | } 1753 | .fa-venus-mars:before { 1754 | content: "\f228"; 1755 | } 1756 | .fa-mars-stroke:before { 1757 | content: "\f229"; 1758 | } 1759 | .fa-mars-stroke-v:before { 1760 | content: "\f22a"; 1761 | } 1762 | .fa-mars-stroke-h:before { 1763 | content: "\f22b"; 1764 | } 1765 | .fa-neuter:before { 1766 | content: "\f22c"; 1767 | } 1768 | .fa-facebook-official:before { 1769 | content: "\f230"; 1770 | } 1771 | .fa-pinterest-p:before { 1772 | content: "\f231"; 1773 | } 1774 | .fa-whatsapp:before { 1775 | content: "\f232"; 1776 | } 1777 | .fa-server:before { 1778 | content: "\f233"; 1779 | } 1780 | .fa-user-plus:before { 1781 | content: "\f234"; 1782 | } 1783 | .fa-user-times:before { 1784 | content: "\f235"; 1785 | } 1786 | .fa-hotel:before, 1787 | .fa-bed:before { 1788 | content: "\f236"; 1789 | } 1790 | .fa-viacoin:before { 1791 | content: "\f237"; 1792 | } 1793 | .fa-train:before { 1794 | content: "\f238"; 1795 | } 1796 | .fa-subway:before { 1797 | content: "\f239"; 1798 | } 1799 | .fa-medium:before { 1800 | content: "\f23a"; 1801 | } 1802 | -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-genderless:before,.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"} -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/font-awesome-4.3.0/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/fonts/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/1.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/8.png -------------------------------------------------------------------------------- /img/related/ElastiStack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/related/ElastiStack.jpg -------------------------------------------------------------------------------- /img/related/StackEffects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CardStackEffects/09c82dfed5bb533bae1d4a55d0f0bffdbd95b67d/img/related/StackEffects.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Effects for Card Stacks | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | Previous Demo 23 | Back to the Codrops article 24 |
25 |

Effects for Card Stacks

26 |
27 |
28 |

Yuda

29 | 37 |
38 | 39 | 40 |
41 |
42 |
43 |

Krisna

44 | 52 |
53 | 54 | 55 |
56 |
57 |
58 |

Wangi

59 | 67 |
68 | 69 | 70 |
71 |
72 |
73 |

Wira

74 | 82 |
83 | 84 | 85 |
86 |
87 |
88 |

Slamet

89 |
90 | 91 | 92 | 93 | Saved Images 94 | 0 95 |
96 | 104 |
105 | 106 | 107 |
108 |
109 |
110 |

Utari

111 | 119 |
120 | 121 | 122 |
123 |
124 |
125 |

Cinta

126 | 134 |
135 | 136 | 137 |
138 |
139 |
140 |

Eka

141 | 149 |
150 | 151 | 152 |
153 |
154 |
155 |

Dian

156 | 164 |
165 | 166 | 167 |
168 |
169 |
170 |

Iman

171 | 179 |
180 | 181 | 182 |
183 |
184 |
185 |

Iskandar

186 | 194 |
195 | 196 | 197 |
198 |
199 |
200 |

Kasih

201 | 209 |
210 | 211 | 212 |
213 |
214 |
215 |

Buana

216 | 224 |
225 | 226 | 227 |
228 |
229 |
230 |
231 |

Mawar

232 | 240 |
241 | 242 | 243 |
244 |
245 | 246 |
247 |

Tree vector designed by Freepik

248 |

If you enjoyed this demo you might also like:

249 | 250 | 251 |

Simple Stack Effects

252 | 253 | 254 | 255 |

Elastic Stack

256 | 257 |
258 |
259 | 260 | 263 | 305 | 306 | 307 | 569 | 570 | 571 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie v1.0.1 3 | * class helper functions 4 | * from bonzo https://github.com/ded/bonzo 5 | * MIT license 6 | * 7 | * classie.has( elem, 'my-class' ) -> true/false 8 | * classie.add( elem, 'my-new-class' ) 9 | * classie.remove( elem, 'my-unwanted-class' ) 10 | * classie.toggle( elem, 'my-class' ) 11 | */ 12 | 13 | /*jshint browser: true, strict: true, undef: true, unused: true */ 14 | /*global define: false, module: false */ 15 | 16 | ( function( window ) { 17 | 18 | 'use strict'; 19 | 20 | // class helper functions from bonzo https://github.com/ded/bonzo 21 | 22 | function classReg( className ) { 23 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 24 | } 25 | 26 | // classList support for class management 27 | // altho to be fair, the api sucks because it won't accept multiple classes at once 28 | var hasClass, addClass, removeClass; 29 | 30 | if ( 'classList' in document.documentElement ) { 31 | hasClass = function( elem, c ) { 32 | return elem.classList.contains( c ); 33 | }; 34 | addClass = function( elem, c ) { 35 | elem.classList.add( c ); 36 | }; 37 | removeClass = function( elem, c ) { 38 | elem.classList.remove( c ); 39 | }; 40 | } 41 | else { 42 | hasClass = function( elem, c ) { 43 | return classReg( c ).test( elem.className ); 44 | }; 45 | addClass = function( elem, c ) { 46 | if ( !hasClass( elem, c ) ) { 47 | elem.className = elem.className + ' ' + c; 48 | } 49 | }; 50 | removeClass = function( elem, c ) { 51 | elem.className = elem.className.replace( classReg( c ), ' ' ); 52 | }; 53 | } 54 | 55 | function toggleClass( elem, c ) { 56 | var fn = hasClass( elem, c ) ? removeClass : addClass; 57 | fn( elem, c ); 58 | } 59 | 60 | var classie = { 61 | // full names 62 | hasClass: hasClass, 63 | addClass: addClass, 64 | removeClass: removeClass, 65 | toggleClass: toggleClass, 66 | // short names 67 | has: hasClass, 68 | add: addClass, 69 | remove: removeClass, 70 | toggle: toggleClass 71 | }; 72 | 73 | // transport 74 | if ( typeof define === 'function' && define.amd ) { 75 | // AMD 76 | define( classie ); 77 | } else if ( typeof exports === 'object' ) { 78 | // CommonJS 79 | module.exports = classie; 80 | } else { 81 | // browser global 82 | window.classie = classie; 83 | } 84 | 85 | })( window ); -------------------------------------------------------------------------------- /js/dynamics.min.js: -------------------------------------------------------------------------------- 1 | (function(){var t,e,n,r,i,o,s,a,l,u,f,h,c,p,m,d,g,y,v,b,w,x,M,k,S,T,C,F,H,R,q,X,Y,j,z,I,A,G,V,Z,E,O,L,D,P,W,N,$,B,U,K,J,Q,_,te,ee,ne=function(t,e){return function(){return t.apply(e,arguments)}};H=function(){return"visible"===document.visibilityState||null!=T.tests},j=function(){var t;return t=[],"undefined"!=typeof document&&null!==document&&document.addEventListener("visibilitychange",function(){var e,n,r,i;for(i=[],n=0,r=t.length;r>n;n++)e=t[n],i.push(e(H()));return i}),function(e){return t.push(e)}}(),x=function(t){var e,n,r;n={};for(e in t)r=t[e],n[e]=r;return n},b=function(t){var e;return e={},function(){var n,r,i,o,s;for(r="",o=0,s=arguments.length;s>o;o++)n=arguments[o],r+=n.toString()+",";return i=e[r],i||(e[r]=i=t.apply(this,arguments)),i}},Y=function(t){return function(e){var n,r,i;return e instanceof Array||e instanceof NodeList||e instanceof HTMLCollection?i=function(){var i,o,s;for(s=[],r=i=0,o=e.length;o>=0?o>i:i>o;r=o>=0?++i:--i)n=Array.prototype.slice.call(arguments,1),n.splice(0,0,e[r]),s.push(t.apply(this,n));return s}.apply(this,arguments):t.apply(this,arguments)}},d=function(t,e){var n,r,i;i=[];for(n in e)r=e[n],i.push(null!=t[n]?t[n]:t[n]=r);return i},g=function(t,e){var n,r,i;if(null!=t.style)return y(t,e);i=[];for(n in e)r=e[n],i.push(t[n]=r.format());return i},y=function(t,e){var n,r,i,o,s;e=z(e),o=[],n=R(t);for(r in e)s=e[r],_.contains(r)?o.push([r,s]):(s=null!=s.format?s.format():""+s+ee(r,s),n&&B.contains(r)?t.setAttribute(r,s):t.style[A(r)]=s);return o.length>0?n?(i=new l,i.applyProperties(o),t.setAttribute("transform",i.decompose().format())):(s=o.map(function(t){return te(t[0],t[1])}).join(" "),t.style[A("transform")]=s):void 0},R=function(t){var e,n;return"undefined"!=typeof SVGElement&&null!==SVGElement&&"undefined"!=typeof SVGSVGElement&&null!==SVGSVGElement?t instanceof SVGElement&&!(t instanceof SVGSVGElement):null!=(e=null!=(n=T.tests)&&"function"==typeof n.isSVG?n.isSVG(t):void 0)?e:!1},Z=function(t,e){var n;return n=Math.pow(10,e),Math.round(t*n)/n},u=function(){function t(t){var e,n,r;for(this.obj={},n=0,r=t.length;r>n;n++)e=t[n],this.obj[e]=1}return t.prototype.contains=function(t){return 1===this.obj[t]},t}(),Q=function(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})},G=new u("marginTop,marginLeft,marginBottom,marginRight,paddingTop,paddingLeft,paddingBottom,paddingRight,top,left,bottom,right,translateX,translateY,translateZ,perspectiveX,perspectiveY,perspectiveZ,width,height,maxWidth,maxHeight,minWidth,minHeight,borderRadius".split(",")),S=new u("rotate,rotateX,rotateY,rotateZ,skew,skewX,skewY,skewZ".split(",")),_=new u("translate,translateX,translateY,translateZ,scale,scaleX,scaleY,scaleZ,rotate,rotateX,rotateY,rotateZ,rotateC,rotateCX,rotateCY,skew,skewX,skewY,skewZ,perspective".split(",")),B=new u("accent-height,ascent,azimuth,baseFrequency,baseline-shift,bias,cx,cy,d,diffuseConstant,divisor,dx,dy,elevation,filterRes,fx,fy,gradientTransform,height,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,letter-spacing,limitingConeAngle,markerHeight,markerWidth,numOctaves,order,overline-position,overline-thickness,pathLength,points,pointsAtX,pointsAtY,pointsAtZ,r,radius,rx,ry,seed,specularConstant,specularExponent,stdDeviation,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,surfaceScale,target,targetX,targetY,transform,underline-position,underline-thickness,viewBox,width,x,x1,x2,y,y1,y2,z".split(",")),ee=function(t,e){return"number"!=typeof e?"":G.contains(t)?"px":S.contains(t)?"deg":""},te=function(t,e){var n,r;return n=(""+e).match(/^([0-9.-]*)([^0-9]*)$/),null!=n?(e=n[1],r=n[2]):e=parseFloat(e),e=Z(parseFloat(e),10),(null==r||""===r)&&(r=ee(t,e)),""+t+"("+e+r+")"},z=function(t){var e,n,r,i,o,s,a,l;r={};for(i in t)if(o=t[i],_.contains(i))if(n=i.match(/(translate|rotateC|rotate|skew|scale|perspective)(X|Y|Z|)/),n&&n[2].length>0)r[i]=o;else for(l=["X","Y","Z"],s=0,a=l.length;a>s;s++)e=l[s],r[n[1]+e]=o;else r[i]=o;return r},k=function(t){var e;return e="opacity"===t?1:0,""+e+ee(t,e)},C=function(t,e){var n,r,i,o,s,u,f,h,c,p,m;if(o={},n=R(t),null!=t.style)for(s=window.getComputedStyle(t,null),f=0,c=e.length;c>f;f++)r=e[f],_.contains(r)?null==o.transform&&(i=n?new l(null!=(m=t.transform.baseVal.consolidate())?m.matrix:void 0):a.fromTransform(s[A("transform")]),o.transform=i.decompose()):(u=s[r],null==u&&B.contains(r)&&(u=t.getAttribute(r)),(""===u||null==u)&&(u=k(r)),o[r]=M(u));else for(h=0,p=e.length;p>h;h++)r=e[h],o[r]=M(t[r]);return o},M=function(t){var e,n,a,l,u;for(a=[i,r,o,s],l=0,u=a.length;u>l;l++)if(n=a[l],e=n.create(t),null!=e)return e;return null},o=function(){function t(t){this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this),this.obj=t}return t.prototype.interpolate=function(e,n){var r,i,o,s,a;s=this.obj,r=e.obj,o={};for(i in s)a=s[i],o[i]=null!=a.interpolate?a.interpolate(r[i],n):a;return new t(o)},t.prototype.format=function(){return this.obj},t.create=function(e){var n,r,i;if(e instanceof Object){r={};for(n in e)i=e[n],r[n]=M(i);return new t(r)}return null},t}(),s=function(){function t(t,e,n){this.prefix=e,this.suffix=n,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this),this.value=parseFloat(t)}return t.prototype.interpolate=function(e,n){var r,i;return i=this.value,r=e.value,new t((r-i)*n+i,e.prefix||this.prefix,e.suffix||this.suffix)},t.prototype.format=function(){return null==this.prefix&&null==this.suffix?Z(this.value,5):this.prefix+Z(this.value,5)+this.suffix},t.create=function(e){var n;return"string"!=typeof e?new t(e):(n=(""+e).match("([^0-9.+-]*)([0-9.+-]+)([^0-9.+-]*)"),null!=n?new t(n[2],n[1],n[3]):null)},t}(),r=function(){function t(t,e){this.values=t,this.sep=e,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n){var r,i,o,s,a,l;for(s=this.values,r=e.values,o=[],i=a=0,l=Math.min(s.length,r.length);l>=0?l>a:a>l;i=l>=0?++a:--a)o.push(null!=s[i].interpolate?s[i].interpolate(r[i],n):s[i]);return new t(o,this.sep)},t.prototype.format=function(){var t;return t=this.values.map(function(t){return null!=t.format?t.format():t}),null!=this.sep?t.join(this.sep):t},t.createFromArray=function(e,n){var r;return r=e.map(function(t){return M(t)||t}),r=r.filter(function(t){return null!=t}),new t(r,n)},t.create=function(e){var n,r,i,o,s;if(e instanceof Array)return t.createFromArray(e,null);if("string"==typeof e){for(i=[" ",",","|",";","/",":"],o=0,s=i.length;s>o;o++)if(r=i[o],n=e.split(r),n.length>1)return t.createFromArray(n,r);return null}},t}(),t=function(){function t(t,e){this.rgb=null!=t?t:{},this.format=e,this.toRgba=ne(this.toRgba,this),this.toRgb=ne(this.toRgb,this),this.toHex=ne(this.toHex,this)}return t.fromHex=function(e){var n,r;return n=e.match(/^#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i),null!=n&&(e="#"+n[1]+n[1]+n[2]+n[2]+n[3]+n[3]),r=e.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i),null!=r?new t({r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16),a:1},"hex"):null},t.fromRgb=function(e){var n,r;return n=e.match(/^rgba?\(([0-9.]*), ?([0-9.]*), ?([0-9.]*)(?:, ?([0-9.]*))?\)$/),null!=n?new t({r:parseFloat(n[1]),g:parseFloat(n[2]),b:parseFloat(n[3]),a:parseFloat(null!=(r=n[4])?r:1)},null!=n[4]?"rgba":"rgb"):null},t.componentToHex=function(t){var e;return e=t.toString(16),1===e.length?"0"+e:e},t.prototype.toHex=function(){return"#"+t.componentToHex(this.rgb.r)+t.componentToHex(this.rgb.g)+t.componentToHex(this.rgb.b)},t.prototype.toRgb=function(){return"rgb("+this.rgb.r+", "+this.rgb.g+", "+this.rgb.b+")"},t.prototype.toRgba=function(){return"rgba("+this.rgb.r+", "+this.rgb.g+", "+this.rgb.b+", "+this.rgb.a+")"},t}(),i=function(){function e(t){this.color=t,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return e.prototype.interpolate=function(n,r){var i,o,s,a,l,u,f,h;for(a=this.color,i=n.color,s={},h=["r","g","b"],u=0,f=h.length;f>u;u++)o=h[u],l=Math.round((i.rgb[o]-a.rgb[o])*r+a.rgb[o]),s[o]=Math.min(255,Math.max(0,l));return o="a",l=Z((i.rgb[o]-a.rgb[o])*r+a.rgb[o],5),s[o]=Math.min(1,Math.max(0,l)),new e(new t(s,i.format))},e.prototype.format=function(){return"hex"===this.color.format?this.color.toHex():"rgb"===this.color.format?this.color.toRgb():"rgba"===this.color.format?this.color.toRgba():void 0},e.create=function(n){var r;if("string"==typeof n)return r=t.fromHex(n)||t.fromRgb(n),null!=r?new e(r):null},e}(),n=function(){function t(t){this.props=t,this.applyRotateCenter=ne(this.applyRotateCenter,this),this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n){var r,i,o,s,a,l,u,f,h,c,p,m;for(o={},c=["translate","scale","rotate"],s=0,f=c.length;f>s;s++)for(i=c[s],o[i]=[],r=a=0,p=this.props[i].length;p>=0?p>a:a>p;r=p>=0?++a:--a)o[i][r]=(e.props[i][r]-this.props[i][r])*n+this.props[i][r];for(r=l=1;2>=l;r=++l)o.rotate[r]=e.props.rotate[r];for(m=["skew"],u=0,h=m.length;h>u;u++)i=m[u],o[i]=(e.props[i]-this.props[i])*n+this.props[i];return new t(o)},t.prototype.format=function(){return"translate("+this.props.translate.join(",")+") rotate("+this.props.rotate.join(",")+") skewX("+this.props.skew+") scale("+this.props.scale.join(",")+")"},t.prototype.applyRotateCenter=function(t){var e,n,r,i,o,s;for(n=v.createSVGMatrix(),n=n.translate(t[0],t[1]),n=n.rotate(this.props.rotate[0]),n=n.translate(-t[0],-t[1]),r=new l(n),i=r.decompose().props.translate,s=[],e=o=0;1>=o;e=++o)s.push(this.props.translate[e]-=i[e]);return s},t}(),v="undefined"!=typeof document&&null!==document?document.createElementNS("http://www.w3.org/2000/svg","svg"):void 0,l=function(){function t(t){this.m=t,this.applyProperties=ne(this.applyProperties,this),this.decompose=ne(this.decompose,this),this.m||(this.m=v.createSVGMatrix())}return t.prototype.decompose=function(){var t,e,r,i,o;return i=new f([this.m.a,this.m.b]),o=new f([this.m.c,this.m.d]),t=i.length(),r=i.dot(o),i=i.normalize(),e=o.combine(i,1,-r).length(),new n({translate:[this.m.e,this.m.f],rotate:[180*Math.atan2(this.m.b,this.m.a)/Math.PI,this.rotateCX,this.rotateCY],scale:[t,e],skew:r/e*180/Math.PI})},t.prototype.applyProperties=function(t){var e,n,r,i,o,s,a,l;for(e={},o=0,s=t.length;s>o;o++)r=t[o],e[r[0]]=r[1];for(n in e)i=e[n],"translateX"===n?this.m=this.m.translate(i,0):"translateY"===n?this.m=this.m.translate(0,i):"scaleX"===n?this.m=this.m.scale(i,1):"scaleY"===n?this.m=this.m.scale(1,i):"rotateZ"===n?this.m=this.m.rotate(i):"skewX"===n?this.m=this.m.skewX(i):"skewY"===n&&(this.m=this.m.skewY(i));return this.rotateCX=null!=(a=e.rotateCX)?a:0,this.rotateCY=null!=(l=e.rotateCY)?l:0},t}(),f=function(){function t(t){this.els=t,this.combine=ne(this.combine,this),this.normalize=ne(this.normalize,this),this.length=ne(this.length,this),this.cross=ne(this.cross,this),this.dot=ne(this.dot,this),this.e=ne(this.e,this)}return t.prototype.e=function(t){return 1>t||t>this.els.length?null:this.els[t-1]},t.prototype.dot=function(t){var e,n,r;if(e=t.els||t,r=0,n=this.els.length,n!==e.length)return null;for(n+=1;--n;)r+=this.els[n-1]*e[n-1];return r},t.prototype.cross=function(e){var n,r;return r=e.els||e,3!==this.els.length||3!==r.length?null:(n=this.els,new t([n[1]*r[2]-n[2]*r[1],n[2]*r[0]-n[0]*r[2],n[0]*r[1]-n[1]*r[0]]))},t.prototype.length=function(){var t,e,n,r,i;for(t=0,i=this.els,n=0,r=i.length;r>n;n++)e=i[n],t+=Math.pow(e,2);return Math.sqrt(t)},t.prototype.normalize=function(){var e,n,r,i,o;r=this.length(),i=[],o=this.els;for(n in o)e=o[n],i[n]=e/r;return new t(i)},t.prototype.combine=function(e,n,r){var i,o,s,a;for(o=[],i=s=0,a=this.els.length;a>=0?a>s:s>a;i=a>=0?++s:--s)o[i]=n*this.els[i]+r*e.els[i];return new t(o)},t}(),e=function(){function t(){this.toMatrix=ne(this.toMatrix,this),this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n,r){var i,o,s,a,l,u,f,h,c,p,m,d,g,y,v,b,w,x;for(null==r&&(r=null),s=this,o=new t,w=["translate","scale","skew","perspective"],d=0,b=w.length;b>d;d++)for(f=w[d],o[f]=[],a=g=0,x=s[f].length-1;x>=0?x>=g:g>=x;a=x>=0?++g:--g)o[f][a]=null==r||r.indexOf(f)>-1||r.indexOf(""+f+["x","y","z"][a])>-1?(e[f][a]-s[f][a])*n+s[f][a]:s[f][a];if(null==r||-1!==r.indexOf("rotate")){if(h=s.quaternion,c=e.quaternion,i=h[0]*c[0]+h[1]*c[1]+h[2]*c[2]+h[3]*c[3],0>i){for(a=y=0;3>=y;a=++y)h[a]=-h[a];i=-i}for(i+1>.05?1-i>=.05?(m=Math.acos(i),u=1/Math.sin(m),p=Math.sin(m*(1-n))*u,l=Math.sin(m*n)*u):(p=1-n,l=n):(c[0]=-h[1],c[1]=h[0],c[2]=-h[3],c[3]=h[2],p=Math.sin(piDouble*(.5-n)),l=Math.sin(piDouble*n)),o.quaternion=[],a=v=0;3>=v;a=++v)o.quaternion[a]=h[a]*p+c[a]*l}else o.quaternion=s.quaternion;return o},t.prototype.format=function(){return this.toMatrix().toString()},t.prototype.toMatrix=function(){var t,e,n,r,i,o,s,l,u,f,h,c,p,m,d,g;for(t=this,i=a.I(4),e=p=0;3>=p;e=++p)i.els[e][3]=t.perspective[e];for(o=t.quaternion,f=o[0],h=o[1],c=o[2],u=o[3],s=t.skew,r=[[1,0],[2,0],[2,1]],e=m=2;m>=0;e=--m)s[e]&&(l=a.I(4),l.els[r[e][0]][r[e][1]]=s[e],i=i.multiply(l));for(i=i.multiply(new a([[1-2*(h*h+c*c),2*(f*h-c*u),2*(f*c+h*u),0],[2*(f*h+c*u),1-2*(f*f+c*c),2*(h*c-f*u),0],[2*(f*c-h*u),2*(h*c+f*u),1-2*(f*f+h*h),0],[0,0,0,1]])),e=d=0;2>=d;e=++d){for(n=g=0;2>=g;n=++g)i.els[e][n]*=t.scale[e];i.els[3][e]=t.translate[e]}return i},t}(),a=function(){function t(t){this.els=t,this.toString=ne(this.toString,this),this.decompose=ne(this.decompose,this),this.inverse=ne(this.inverse,this),this.augment=ne(this.augment,this),this.toRightTriangular=ne(this.toRightTriangular,this),this.transpose=ne(this.transpose,this),this.multiply=ne(this.multiply,this),this.dup=ne(this.dup,this),this.e=ne(this.e,this)}return t.prototype.e=function(t,e){return 1>t||t>this.els.length||1>e||e>this.els[0].length?null:this.els[t-1][e-1]},t.prototype.dup=function(){return new t(this.els)},t.prototype.multiply=function(e){var n,r,i,o,s,a,l,u,f,h,c,p,m;for(p=e.modulus?!0:!1,n=e.els||e,"undefined"==typeof n[0][0]&&(n=new t(n).els),h=this.els.length,l=h,u=n[0].length,i=this.els[0].length,o=[],h+=1;--h;)for(s=l-h,o[s]=[],c=u,c+=1;--c;){for(a=u-c,m=0,f=i,f+=1;--f;)r=i-f,m+=this.els[s][r]*n[r][a];o[s][a]=m}return n=new t(o),p?n.col(1):n},t.prototype.transpose=function(){var e,n,r,i,o,s,a;for(a=this.els.length,e=this.els[0].length,n=[],o=e,o+=1;--o;)for(r=e-o,n[r]=[],s=a,s+=1;--s;)i=a-s,n[r][i]=this.els[i][r];return new t(n)},t.prototype.toRightTriangular=function(){var t,e,n,r,i,o,s,a,l,u,f,h,c,p;for(t=this.dup(),a=this.els.length,i=a,o=this.els[0].length;--a;){if(n=i-a,0===t.els[n][n])for(r=f=c=n+1;i>=c?i>f:f>i;r=i>=c?++f:--f)if(0!==t.els[r][n]){for(e=[],l=o,l+=1;--l;)u=o-l,e.push(t.els[n][u]+t.els[r][u]);t.els[n]=e;break}if(0!==t.els[n][n])for(r=h=p=n+1;i>=p?i>h:h>i;r=i>=p?++h:--h){for(s=t.els[r][n]/t.els[n][n],e=[],l=o,l+=1;--l;)u=o-l,e.push(n>=u?0:t.els[r][u]-t.els[n][u]*s);t.els[r]=e}}return t},t.prototype.augment=function(e){var n,r,i,o,s,a,l,u,f;if(n=e.els||e,"undefined"==typeof n[0][0]&&(n=new t(n).els),r=this.dup(),i=r.els[0].length,u=r.els.length,a=u,l=n[0].length,u!==n.length)return null;for(u+=1;--u;)for(o=a-u,f=l,f+=1;--f;)s=l-f,r.els[o][i+s]=n[o][s];return r},t.prototype.inverse=function(){var e,n,r,i,o,s,a,l,u,f,h,c,p;for(f=this.els.length,a=f,e=this.augment(t.I(f)).toRightTriangular(),l=e.els[0].length,o=[],f+=1;--f;){for(i=f-1,r=[],h=l,o[i]=[],n=e.els[i][i],h+=1;--h;)c=l-h,u=e.els[i][c]/n,r.push(u),c>=a&&o[i].push(u);for(e.els[i]=r,s=p=0;i>=0?i>p:p>i;s=i>=0?++p:--p){for(r=[],h=l,h+=1;--h;)c=l-h,r.push(e.els[s][c]-e.els[i][c]*e.els[s][i]);e.els[s]=r}}return new t(o)},t.I=function(e){var n,r,i,o,s;for(n=[],o=e,e+=1;--e;)for(r=o-e,n[r]=[],s=o,s+=1;--s;)i=o-s,n[r][i]=r===i?1:0;return new t(n)},t.prototype.decompose=function(){var t,n,r,i,o,s,a,l,u,h,c,p,m,d,g,y,v,b,w,x,M,k,S,T,C,F,H,R,q,X,Y,j,z,I,A,G,V,Z;for(s=this,x=[],v=[],b=[],h=[],l=[],t=[],n=q=0;3>=q;n=++q)for(t[n]=[],i=X=0;3>=X;i=++X)t[n][i]=s.els[n][i];if(0===t[3][3])return!1;for(n=Y=0;3>=Y;n=++Y)for(i=j=0;3>=j;i=++j)t[n][i]/=t[3][3];for(u=s.dup(),n=z=0;2>=z;n=++z)u.els[n][3]=0;if(u.els[3][3]=1,0!==t[0][3]||0!==t[1][3]||0!==t[2][3]){for(p=new f(t.slice(0,4)[3]),r=u.inverse(),M=r.transpose(),l=M.multiply(p).els,n=I=0;2>=I;n=++I)t[n][3]=0;t[3][3]=1}else l=[0,0,0,1];for(n=A=0;2>=A;n=++A)x[n]=t[3][n],t[3][n]=0;for(d=[],n=G=0;2>=G;n=++G)d[n]=new f(t[n].slice(0,3));if(v[0]=d[0].length(),d[0]=d[0].normalize(),b[0]=d[0].dot(d[1]),d[1]=d[1].combine(d[0],1,-b[0]),v[1]=d[1].length(),d[1]=d[1].normalize(),b[0]/=v[1],b[1]=d[0].dot(d[2]),d[2]=d[2].combine(d[0],1,-b[1]),b[2]=d[1].dot(d[2]),d[2]=d[2].combine(d[1],1,-b[2]),v[2]=d[2].length(),d[2]=d[2].normalize(),b[1]/=v[2],b[2]/=v[2],a=d[1].cross(d[2]),d[0].dot(a)<0)for(n=V=0;2>=V;n=++V)for(v[n]*=-1,i=Z=0;2>=Z;i=++Z)d[n].els[i]*=-1;g=function(t,e){return d[t].els[e]},m=[],m[1]=Math.asin(-g(0,2)),0!==Math.cos(m[1])?(m[0]=Math.atan2(g(1,2),g(2,2)),m[2]=Math.atan2(g(0,1),g(0,0))):(m[0]=Math.atan2(-g(2,0),g(1,1)),m[1]=0),w=g(0,0)+g(1,1)+g(2,2)+1,w>1e-4?(y=.5/Math.sqrt(w),C=.25/y,F=(g(2,1)-g(1,2))*y,H=(g(0,2)-g(2,0))*y,R=(g(1,0)-g(0,1))*y):g(0,0)>g(1,1)&&g(0,0)>g(2,2)?(y=2*Math.sqrt(1+g(0,0)-g(1,1)-g(2,2)),F=.25*y,H=(g(0,1)+g(1,0))/y,R=(g(0,2)+g(2,0))/y,C=(g(2,1)-g(1,2))/y):g(1,1)>g(2,2)?(y=2*Math.sqrt(1+g(1,1)-g(0,0)-g(2,2)),F=(g(0,1)+g(1,0))/y,H=.25*y,R=(g(1,2)+g(2,1))/y,C=(g(0,2)-g(2,0))/y):(y=2*Math.sqrt(1+g(2,2)-g(0,0)-g(1,1)),F=(g(0,2)+g(2,0))/y,H=(g(1,2)+g(2,1))/y,R=.25*y,C=(g(1,0)-g(0,1))/y),h=[F,H,R,C],c=new e,c.translate=x,c.scale=v,c.skew=b,c.quaternion=h,c.perspective=l,c.rotate=m;for(S in c){k=c[S];for(o in k)T=k[o],isNaN(T)&&(k[o]=0)}return c},t.prototype.toString=function(){var t,e,n,r,i;for(n="matrix3d(",t=r=0;3>=r;t=++r)for(e=i=0;3>=i;e=++i)n+=Z(this.els[t][e],10),(3!==t||3!==e)&&(n+=",");return n+=")"},t.matrixForTransform=b(function(t){var e,n,r,i,o,s;return e=document.createElement("div"),e.style.position="absolute",e.style.visibility="hidden",e.style[A("transform")]=t,document.body.appendChild(e),r=window.getComputedStyle(e,null),n=null!=(i=null!=(o=r.transform)?o:r[A("transform")])?i:null!=(s=T.tests)?s.matrixForTransform(t):void 0,document.body.removeChild(e),n}),t.fromTransform=function(e){var n,r,i,o,s,a;for(o=null!=e?e.match(/matrix3?d?\(([-0-9,e \.]*)\)/):void 0,o?(n=o[1].split(","),n=n.map(parseFloat),r=6===n.length?[n[0],n[1],0,0,n[2],n[3],0,0,0,0,1,0,n[4],n[5],0,1]:n):r=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],s=[],i=a=0;3>=a;i=++a)s.push(r.slice(4*i,4*i+4));return new t(s)},t}(),I=b(function(t){var e,n,r,i,o,s,a,l,u,f;if(void 0!==document.body.style[t])return"";for(i=t.split("-"),o="",s=0,l=i.length;l>s;s++)r=i[s],o+=r.substring(0,1).toUpperCase()+r.substring(1);for(f=["Webkit","Moz","ms"],a=0,u=f.length;u>a;a++)if(n=f[a],e=n+o,void 0!==document.body.style[e])return n;return""}),A=b(function(t){var e;return e=I(t),"Moz"===e?""+e+(t.substring(0,1).toUpperCase()+t.substring(1)):""!==e?"-"+e.toLowerCase()+"-"+Q(t):Q(t)}),V="undefined"!=typeof window&&null!==window?window.requestAnimationFrame:void 0,p=[],m=[],P=!1,W=1,"undefined"!=typeof window&&null!==window&&window.addEventListener("keyup",function(t){return 68===t.keyCode&&t.shiftKey&&t.ctrlKey?T.toggleSlow():void 0}),null==V&&(q=0,V=function(t){var e,n,r;return e=Date.now(),r=Math.max(0,16-(e-q)),n=window.setTimeout(function(){return t(e+r)},r),q=e+r,n}),O=!1,E=!1,$=function(){return O?void 0:(O=!0,V(L))},L=function(t){var e,n,r,i;if(E)return void V(L);for(n=[],r=0,i=p.length;i>r;r++)e=p[r],c(t,e)||n.push(e);return p=p.filter(function(t){return-1===n.indexOf(t)}),0===p.length?O=!1:V(L)},c=function(t,e){var n,r,i,o,s,a,l,u;if(null==e.tStart&&(e.tStart=t),o=(t-e.tStart)/e.options.duration,s=e.curve(o),r={},o>=1)r=e.curve.initialForce?e.properties.start:e.properties.end;else{u=e.properties.start;for(n in u)i=u[n],r[n]=F(i,e.properties.end[n],s)}return g(e.el,r),"function"==typeof(a=e.options).change&&a.change(e.el),o>=1&&"function"==typeof(l=e.options).complete&&l.complete(e.el),1>o},F=function(t,e,n){return null!=t&&null!=t.interpolate?t.interpolate(e,n):null},N=function(t,e,n,r){var i,o,u,f,h,c,d,g;if(null!=r&&(m=m.filter(function(t){return t.id!==r})),T.stop(t,{timeout:!1}),!n.animated)return T.css(t,e),void("function"==typeof n.complete&&n.complete(this));e=z(e),h=C(t,Object.keys(e)),i={},c=[];for(u in e)d=e[u],_.contains(u)?c.push([u,d]):(i[u]=M(d),i[u]instanceof s&&null!=t.style&&(i[u].prefix="",null==(g=i[u]).suffix&&(g.suffix=ee(u,0))));return c.length>0&&(o=R(t),o?(f=new l,f.applyProperties(c)):(d=c.map(function(t){return te(t[0],t[1])}).join(" "),f=a.fromTransform(a.matrixForTransform(d))),i.transform=f.decompose(),o&&h.transform.applyRotateCenter([i.transform.props.rotate[1],i.transform.props.rotate[2]])),p.push({el:t,properties:{start:h,end:i},options:n,curve:n.type.call(n.type,n)}),$()},J=[],K=0,D=function(t){return H()?t.realTimeoutId=setTimeout(function(){return t.fn(),w(t.id)},t.delay):void 0},h=function(t,e){var n;return K+=1,n={id:K,tStart:Date.now(),fn:t,delay:e,originalDelay:e},D(n),J.push(n),K},w=function(t){return J=J.filter(function(e){return e.id===t&&clearTimeout(e.realTimeoutId),e.id!==t})},X=function(t,e){var n;return null!=t?(n=t-e.tStart,e.originalDelay-n):e.originalDelay},"undefined"!=typeof window&&null!==window&&window.addEventListener("unload",function(){}),U=null,j(function(t){var e,n,r,i,o,s,a,l,u,f;if(E=!t,t){if(O)for(n=Date.now()-U,o=0,l=p.length;l>o;o++)e=p[o],null!=e.tStart&&(e.tStart+=n);for(s=0,u=J.length;u>s;s++)r=J[s],r.delay=X(U,r),D(r);return U=null}for(U=Date.now(),f=[],i=0,a=J.length;a>i;i++)r=J[i],f.push(clearTimeout(r.realTimeoutId));return f}),T={},T.linear=function(){return function(t){return t}},T.spring=function(t){var e,n,r,i,o,s;return null==t&&(t={}),d(t,arguments.callee.defaults),i=Math.max(1,t.frequency/20),o=Math.pow(20,t.friction/100),s=t.anticipationSize/1e3,r=Math.max(0,s),e=function(e){var n,r,i,o,a;return n=.8,o=s/(1-s),a=0,i=(o-n*a)/(o-a),r=(n-i)/o,r*e*t.anticipationStrength/100+i},n=function(t){return Math.pow(o/10,-t)*(1-t)},function(t){var r,o,a,l,u,f,h,c;return f=t/(1-s)-s/(1-s),s>t?(c=s/(1-s)-s/(1-s),h=0/(1-s)-s/(1-s),u=Math.acos(1/e(c)),a=(Math.acos(1/e(h))-u)/(i*-s),r=e):(r=n,u=0,a=1),o=r(f),l=i*(t-s)*a+u,1-o*Math.cos(l)}},T.bounce=function(t){var e,n,r,i;return null==t&&(t={}),d(t,arguments.callee.defaults),r=Math.max(1,t.frequency/20),i=Math.pow(20,t.friction/100),e=function(t){return Math.pow(i/10,-t)*(1-t)},n=function(t){var n,i,o,s;return s=-1.57,i=1,n=e(t),o=r*t*i+s,n*Math.cos(o)},n.initialForce=!0,n},T.gravity=function(t){var e,n,r,i,o,s,a;return null==t&&(t={}),d(t,arguments.callee.defaults),n=Math.min(t.bounciness/1250,.8),i=t.elasticity/1e3,a=100,r=[],e=function(){var r,i;for(r=Math.sqrt(2/a),i={a:-r,b:r,H:1},t.initialForce&&(i.a=0,i.b=2*i.b);i.H>.001;)e=i.b-i.a,i={a:i.b,b:i.b+e*n,H:i.H*n*n};return i.b}(),s=function(n,r,i,o){var s,a;return e=r-n,a=2/e*o-1-2*n/e,s=a*a*i-i+1,t.initialForce&&(s=1-s),s},function(){var o,s,l,u;for(s=Math.sqrt(2/(a*e*e)),l={a:-s,b:s,H:1},t.initialForce&&(l.a=0,l.b=2*l.b),r.push(l),o=e,u=[];l.b<1&&l.H>.001;)o=l.b-l.a,l={a:l.b,b:l.b+o*n,H:l.H*i},u.push(r.push(l));return u}(),o=function(e){var n,i,o;for(i=0,n=r[i];!(e>=n.a&&e<=n.b)&&(i+=1,n=r[i]););return o=n?s(n.a,n.b,n.H,e):t.initialForce?0:1},o.initialForce=t.initialForce,o},T.forceWithGravity=function(t){return null==t&&(t={}),d(t,arguments.callee.defaults),t.initialForce=!0,T.gravity(t)},T.bezier=function(){var t,e,n;return e=function(t,e,n,r,i){return Math.pow(1-t,3)*e+3*Math.pow(1-t,2)*t*n+3*(1-t)*Math.pow(t,2)*r+Math.pow(t,3)*i},t=function(t,n,r,i,o){return{x:e(t,n.x,r.x,i.x,o.x),y:e(t,n.y,r.y,i.y,o.y)}},n=function(t,e,n){var r,i,o,s,a,l,u,f,h,c;for(r=null,h=0,c=e.length;c>h&&(i=e[h],t>=i(0).x&&t<=i(1).x&&(r=i),null===r);h++);if(!r)return n?0:1;for(f=1e-4,s=0,l=1,a=(l+s)/2,u=r(a).x,o=0;Math.abs(t-u)>f&&100>o;)t>u?s=a:l=a,a=(l+s)/2,u=r(a).x,o+=1;return r(a).y},function(e){var r,i,o;return null==e&&(e={}),i=e.points,o=!1,r=function(){var e,n,o;r=[],o=function(e,n){var i;return i=function(r){return t(r,e,e.cp[e.cp.length-1],n.cp[0],n)},r.push(i)};for(e in i){if(n=parseInt(e),n>=i.length-1)break;o(i[n],i[n+1])}return r}(),function(t){return 0===t?0:1===t?1:n(t,r,o)}}}(),T.easeInOut=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:.92-e/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+e/1e3,y:1}]}]})},T.easeIn=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:.92-e/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},T.easeOut=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+e/1e3,y:1}]}]})},T.spring.defaults={frequency:300,friction:200,anticipationSize:0,anticipationStrength:0},T.bounce.defaults={frequency:300,friction:200},T.forceWithGravity.defaults=T.gravity.defaults={bounciness:400,elasticity:200},T.easeInOut.defaults=T.easeIn.defaults=T.easeOut.defaults={friction:500},T.css=Y(function(t,e){return y(t,e,!0)}),T.animate=Y(function(t,e,n){var r;return null==n&&(n={}),n=x(n),d(n,{type:T.easeInOut,duration:1e3,delay:0,animated:!0}),n.duration=Math.max(0,n.duration*W),n.delay=Math.max(0,n.delay),0===n.delay?N(t,e,n):(r=T.setTimeout(function(){return N(t,e,n,r)},n.delay),m.push({id:r,el:t}))}),T.stop=Y(function(t,e){return null==e&&(e={}),null==e.timeout&&(e.timeout=!0),e.timeout&&(m=m.filter(function(n){return n.el!==t||null!=e.filter&&!e.filter(n)?!1:(T.clearTimeout(n.id),!0)})),p=p.filter(function(e){return e.el!==t})}),T.setTimeout=function(t,e){return h(t,e*W)},T.clearTimeout=function(t){return w(t)},T.toggleSlow=function(){return P=!P,W=P?3:1,"undefined"!=typeof console&&null!==console&&"function"==typeof console.log?console.log("dynamics.js: slow animations "+(P?"enabled":"disabled")):void 0},"object"==typeof module&&"object"==typeof module.exports?module.exports=T:"function"==typeof define?define("dynamics",function(){return T}):window.dynamics=T}).call(this); -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2015, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;(function(window) { 12 | 13 | 'use strict'; 14 | 15 | var support = { animations : Modernizr.cssanimations }, 16 | animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, 17 | animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], 18 | onEndAnimation = function( el, callback ) { 19 | var onEndCallbackFn = function( ev ) { 20 | if( support.animations ) { 21 | if( ev.target != this ) return; 22 | this.removeEventListener( animEndEventName, onEndCallbackFn ); 23 | } 24 | if( callback && typeof callback === 'function' ) { callback.call(); } 25 | }; 26 | if( support.animations ) { 27 | el.addEventListener( animEndEventName, onEndCallbackFn ); 28 | } 29 | else { 30 | onEndCallbackFn(); 31 | } 32 | }; 33 | 34 | function extend( a, b ) { 35 | for( var key in b ) { 36 | if( b.hasOwnProperty( key ) ) { 37 | a[key] = b[key]; 38 | } 39 | } 40 | return a; 41 | } 42 | 43 | function Stack(el, options) { 44 | this.el = el; 45 | this.options = extend( {}, this.options ); 46 | extend( this.options, options ); 47 | this.items = [].slice.call(this.el.children); 48 | this.itemsTotal = this.items.length; 49 | if( this.options.infinite && this.options.visible >= this.itemsTotal || !this.options.infinite && this.options.visible > this.itemsTotal || this.options.visible <=0 ) { 50 | this.options.visible = 1; 51 | } 52 | this.current = 0; 53 | this._init(); 54 | } 55 | 56 | Stack.prototype.options = { 57 | // stack's perspective value 58 | perspective: 1000, 59 | // stack's perspective origin 60 | perspectiveOrigin : '50% -50%', 61 | // number of visible items in the stack 62 | visible : 3, 63 | // infinite navigation 64 | infinite : true, 65 | // callback: when reaching the end of the stack 66 | onEndStack : function() {return false;}, 67 | // animation settings for the items' movements in the stack when the items rearrange 68 | // object that is passed to the dynamicsjs animate function (see more at http://dynamicsjs.com/) 69 | // example: 70 | // {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392} 71 | stackItemsAnimation : { 72 | duration : 500, 73 | type : dynamics.bezier, 74 | points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}] 75 | }, 76 | // delay for the items' rearrangement / delay before stackItemsAnimation is applied 77 | stackItemsAnimationDelay : 0, 78 | // animation settings for the items' movements in the stack before the rearrangement 79 | // we can set up different settings depending on whether we are approving or rejecting an item 80 | /* 81 | stackItemsPreAnimation : { 82 | reject : { 83 | // if true, then the settings.properties parameter will be distributed through the items in a non equal fashion 84 | // for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, 85 | // then the second item in the stack will translate 100px, the second one 75px and the third 50px 86 | elastic : true, 87 | // object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/) 88 | animationProperties : {}, 89 | // object that is passed into the dynamicsjs animate function - third parameter - (see more at http://dynamicsjs.com/) 90 | animationSettings : {} 91 | }, 92 | accept : { 93 | // if true, then the settings.properties parameter will be distributed through the items in a non equal fashion 94 | // for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, 95 | // then the second item on the stack will translate 100px, the second one 75px and the third 50px 96 | elastic : true, 97 | // object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/) 98 | animationProperties : {}, 99 | // object that is passed into the dynamicsjs animate function (see more at http://dynamicsjs.com/) 100 | animationSettings : {} 101 | } 102 | } 103 | */ 104 | }; 105 | 106 | // set the initial styles for the visible items 107 | Stack.prototype._init = function() { 108 | // set default styles 109 | // first, the stack 110 | this.el.style.WebkitPerspective = this.el.style.perspective = this.options.perspective + 'px'; 111 | this.el.style.WebkitPerspectiveOrigin = this.el.style.perspectiveOrigin = this.options.perspectiveOrigin; 112 | 113 | var self = this; 114 | 115 | // the items 116 | for(var i = 0; i < this.itemsTotal; ++i) { 117 | var item = this.items[i]; 118 | if( i < this.options.visible ) { 119 | item.style.opacity = 1; 120 | item.style.pointerEvents = 'auto'; 121 | item.style.zIndex = i === 0 ? parseInt(this.options.visible + 1) : parseInt(this.options.visible - i); 122 | item.style.WebkitTransform = item.style.transform = 'translate3d(0px, 0px, ' + parseInt(-1 * 50 * i) + 'px)'; 123 | } 124 | else { 125 | item.style.WebkitTransform = item.style.transform = 'translate3d(0,0,-' + parseInt(this.options.visible * 50) + 'px)'; 126 | } 127 | } 128 | 129 | classie.add(this.items[this.current], 'stack__item--current'); 130 | }; 131 | 132 | Stack.prototype.reject = function(callback) { 133 | this._next('reject', callback); 134 | }; 135 | 136 | Stack.prototype.accept = function(callback) { 137 | this._next('accept', callback); 138 | }; 139 | 140 | Stack.prototype.restart = function() { 141 | this.hasEnded = false; 142 | this._init(); 143 | }; 144 | 145 | Stack.prototype._next = function(action, callback) { 146 | if( this.isAnimating || ( !this.options.infinite && this.hasEnded ) ) return; 147 | this.isAnimating = true; 148 | 149 | // current item 150 | var currentItem = this.items[this.current]; 151 | classie.remove(currentItem, 'stack__item--current'); 152 | 153 | // add animation class 154 | classie.add(currentItem, action === 'accept' ? 'stack__item--accept' : 'stack__item--reject'); 155 | 156 | var self = this; 157 | onEndAnimation(currentItem, function() { 158 | // reset current item 159 | currentItem.style.opacity = 0; 160 | currentItem.style.pointerEvents = 'none'; 161 | currentItem.style.zIndex = -1; 162 | currentItem.style.WebkitTransform = currentItem.style.transform = 'translate3d(0px, 0px, -' + parseInt(self.options.visible * 50) + 'px)'; 163 | 164 | classie.remove(currentItem, action === 'accept' ? 'stack__item--accept' : 'stack__item--reject'); 165 | 166 | self.items[self.current].style.zIndex = self.options.visible + 1; 167 | self.isAnimating = false; 168 | 169 | if( callback ) callback(); 170 | 171 | if( !self.options.infinite && self.current === 0 ) { 172 | self.hasEnded = true; 173 | // callback 174 | self.options.onEndStack(self); 175 | } 176 | }); 177 | 178 | // set style for the other items 179 | for(var i = 0; i < this.itemsTotal; ++i) { 180 | if( i >= this.options.visible ) break; 181 | 182 | if( !this.options.infinite ) { 183 | if( this.current + i >= this.itemsTotal - 1 ) break; 184 | var pos = this.current + i + 1; 185 | } 186 | else { 187 | var pos = this.current + i < this.itemsTotal - 1 ? this.current + i + 1 : i - (this.itemsTotal - this.current - 1); 188 | } 189 | 190 | var item = this.items[pos], 191 | // stack items animation 192 | animateStackItems = function(item, i) { 193 | item.style.pointerEvents = 'auto'; 194 | item.style.opacity = 1; 195 | item.style.zIndex = parseInt(self.options.visible - i); 196 | 197 | dynamics.animate(item, { 198 | translateZ : parseInt(-1 * 50 * i) 199 | }, self.options.stackItemsAnimation); 200 | }; 201 | 202 | setTimeout(function(item,i) { 203 | return function() { 204 | var preAnimation; 205 | 206 | if( self.options.stackItemsPreAnimation ) { 207 | preAnimation = action === 'accept' ? self.options.stackItemsPreAnimation.accept : self.options.stackItemsPreAnimation.reject; 208 | } 209 | 210 | if( preAnimation ) { 211 | // items "pre animation" properties 212 | var animProps = {}; 213 | 214 | for (var key in preAnimation.animationProperties) { 215 | var interval = preAnimation.elastic ? preAnimation.animationProperties[key]/self.options.visible : 0; 216 | animProps[key] = preAnimation.animationProperties[key] - Number(i*interval); 217 | } 218 | 219 | // this one remains the same.. 220 | animProps.translateZ = parseInt(-1 * 50 * (i+1)); 221 | 222 | preAnimation.animationSettings.complete = function() { 223 | animateStackItems(item, i); 224 | }; 225 | 226 | dynamics.animate(item, animProps, preAnimation.animationSettings); 227 | } 228 | else { 229 | animateStackItems(item, i); 230 | } 231 | }; 232 | }(item,i), this.options.stackItemsAnimationDelay); 233 | } 234 | 235 | // update current 236 | this.current = this.current < this.itemsTotal - 1 ? this.current + 1 : 0; 237 | classie.add(this.items[this.current], 'stack__item--current'); 238 | } 239 | 240 | window.Stack = Stack; 241 | 242 | })(window); -------------------------------------------------------------------------------- /js/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /*! modernizr 3.1.0 (Custom Build) | MIT * 2 | * http://modernizr.com/download/?-cssanimations-prefixed !*/ 3 | !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;td;d++)if(v=e[d],h=P.style[v],a(v,"-")&&(v=s(v)),P.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{P.style[v]=o}catch(g){}if(P.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.1.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var x=n.documentElement,w="svg"===x.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes[s],f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var z={elem:f("modernizr")};Modernizr._q.push(function(){delete z.elem});var P={style:z.elem.style};Modernizr._q.unshift(function(){delete P.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T