├── .editorconfig ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css ├── animate.css ├── animate.min.css ├── bootstrap-dropdownhover.css └── bootstrap-dropdownhover.min.css ├── js ├── bootstrap-dropdownhover.js └── bootstrap-dropdownhover.min.js ├── package-lock.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto 3 | 4 | yarn.lock merge=ours 5 | package-lock.json merge=ours 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | *.log 4 | /node_modules 5 | .idea/ 6 | .vscode/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 kybarg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap 3 Dropdown On Hover 2 | ========================== 3 | 4 | Bootstrap based responsive mulltilevel dropdown navigation menu with fascinating animations 5 | 6 | Visit Demo or Documentation 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | Copyright (c) 2014 Daniel Eden 7 | */ 8 | 9 | .animated { 10 | -webkit-animation-duration: 1s; 11 | animation-duration: 1s; 12 | -webkit-animation-fill-mode: both; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | -webkit-animation-iteration-count: infinite; 18 | animation-iteration-count: infinite; 19 | } 20 | 21 | .animated.hinge { 22 | -webkit-animation-duration: 2s; 23 | animation-duration: 2s; 24 | } 25 | 26 | @-webkit-keyframes bounce { 27 | 0%, 20%, 53%, 80%, 100% { 28 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 29 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 30 | -webkit-transform: translate3d(0,0,0); 31 | transform: translate3d(0,0,0); 32 | } 33 | 34 | 40%, 43% { 35 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 36 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 37 | -webkit-transform: translate3d(0, -30px, 0); 38 | transform: translate3d(0, -30px, 0); 39 | } 40 | 41 | 70% { 42 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 43 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | -webkit-transform: translate3d(0, -15px, 0); 45 | transform: translate3d(0, -15px, 0); 46 | } 47 | 48 | 90% { 49 | -webkit-transform: translate3d(0,-4px,0); 50 | transform: translate3d(0,-4px,0); 51 | } 52 | } 53 | 54 | @keyframes bounce { 55 | 0%, 20%, 53%, 80%, 100% { 56 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 57 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 58 | -webkit-transform: translate3d(0,0,0); 59 | transform: translate3d(0,0,0); 60 | } 61 | 62 | 40%, 43% { 63 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 64 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 65 | -webkit-transform: translate3d(0, -30px, 0); 66 | transform: translate3d(0, -30px, 0); 67 | } 68 | 69 | 70% { 70 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 71 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 72 | -webkit-transform: translate3d(0, -15px, 0); 73 | transform: translate3d(0, -15px, 0); 74 | } 75 | 76 | 90% { 77 | -webkit-transform: translate3d(0,-4px,0); 78 | transform: translate3d(0,-4px,0); 79 | } 80 | } 81 | 82 | .bounce { 83 | -webkit-animation-name: bounce; 84 | animation-name: bounce; 85 | -webkit-transform-origin: center bottom; 86 | -ms-transform-origin: center bottom; 87 | transform-origin: center bottom; 88 | } 89 | 90 | @-webkit-keyframes flash { 91 | 0%, 50%, 100% { 92 | opacity: 1; 93 | } 94 | 95 | 25%, 75% { 96 | opacity: 0; 97 | } 98 | } 99 | 100 | @keyframes flash { 101 | 0%, 50%, 100% { 102 | opacity: 1; 103 | } 104 | 105 | 25%, 75% { 106 | opacity: 0; 107 | } 108 | } 109 | 110 | .flash { 111 | -webkit-animation-name: flash; 112 | animation-name: flash; 113 | } 114 | 115 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 116 | 117 | @-webkit-keyframes pulse { 118 | 0% { 119 | -webkit-transform: scale3d(1, 1, 1); 120 | transform: scale3d(1, 1, 1); 121 | } 122 | 123 | 50% { 124 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 125 | transform: scale3d(1.05, 1.05, 1.05); 126 | } 127 | 128 | 100% { 129 | -webkit-transform: scale3d(1, 1, 1); 130 | transform: scale3d(1, 1, 1); 131 | } 132 | } 133 | 134 | @keyframes pulse { 135 | 0% { 136 | -webkit-transform: scale3d(1, 1, 1); 137 | transform: scale3d(1, 1, 1); 138 | } 139 | 140 | 50% { 141 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 142 | transform: scale3d(1.05, 1.05, 1.05); 143 | } 144 | 145 | 100% { 146 | -webkit-transform: scale3d(1, 1, 1); 147 | transform: scale3d(1, 1, 1); 148 | } 149 | } 150 | 151 | .pulse { 152 | -webkit-animation-name: pulse; 153 | animation-name: pulse; 154 | } 155 | 156 | @-webkit-keyframes rubberBand { 157 | 0% { 158 | -webkit-transform: scale3d(1, 1, 1); 159 | transform: scale3d(1, 1, 1); 160 | } 161 | 162 | 30% { 163 | -webkit-transform: scale3d(1.25, 0.75, 1); 164 | transform: scale3d(1.25, 0.75, 1); 165 | } 166 | 167 | 40% { 168 | -webkit-transform: scale3d(0.75, 1.25, 1); 169 | transform: scale3d(0.75, 1.25, 1); 170 | } 171 | 172 | 50% { 173 | -webkit-transform: scale3d(1.15, 0.85, 1); 174 | transform: scale3d(1.15, 0.85, 1); 175 | } 176 | 177 | 65% { 178 | -webkit-transform: scale3d(.95, 1.05, 1); 179 | transform: scale3d(.95, 1.05, 1); 180 | } 181 | 182 | 75% { 183 | -webkit-transform: scale3d(1.05, .95, 1); 184 | transform: scale3d(1.05, .95, 1); 185 | } 186 | 187 | 100% { 188 | -webkit-transform: scale3d(1, 1, 1); 189 | transform: scale3d(1, 1, 1); 190 | } 191 | } 192 | 193 | @keyframes rubberBand { 194 | 0% { 195 | -webkit-transform: scale3d(1, 1, 1); 196 | transform: scale3d(1, 1, 1); 197 | } 198 | 199 | 30% { 200 | -webkit-transform: scale3d(1.25, 0.75, 1); 201 | transform: scale3d(1.25, 0.75, 1); 202 | } 203 | 204 | 40% { 205 | -webkit-transform: scale3d(0.75, 1.25, 1); 206 | transform: scale3d(0.75, 1.25, 1); 207 | } 208 | 209 | 50% { 210 | -webkit-transform: scale3d(1.15, 0.85, 1); 211 | transform: scale3d(1.15, 0.85, 1); 212 | } 213 | 214 | 65% { 215 | -webkit-transform: scale3d(.95, 1.05, 1); 216 | transform: scale3d(.95, 1.05, 1); 217 | } 218 | 219 | 75% { 220 | -webkit-transform: scale3d(1.05, .95, 1); 221 | transform: scale3d(1.05, .95, 1); 222 | } 223 | 224 | 100% { 225 | -webkit-transform: scale3d(1, 1, 1); 226 | transform: scale3d(1, 1, 1); 227 | } 228 | } 229 | 230 | .rubberBand { 231 | -webkit-animation-name: rubberBand; 232 | animation-name: rubberBand; 233 | } 234 | 235 | @-webkit-keyframes shake { 236 | 0%, 100% { 237 | -webkit-transform: translate3d(0, 0, 0); 238 | transform: translate3d(0, 0, 0); 239 | } 240 | 241 | 10%, 30%, 50%, 70%, 90% { 242 | -webkit-transform: translate3d(-10px, 0, 0); 243 | transform: translate3d(-10px, 0, 0); 244 | } 245 | 246 | 20%, 40%, 60%, 80% { 247 | -webkit-transform: translate3d(10px, 0, 0); 248 | transform: translate3d(10px, 0, 0); 249 | } 250 | } 251 | 252 | @keyframes shake { 253 | 0%, 100% { 254 | -webkit-transform: translate3d(0, 0, 0); 255 | transform: translate3d(0, 0, 0); 256 | } 257 | 258 | 10%, 30%, 50%, 70%, 90% { 259 | -webkit-transform: translate3d(-10px, 0, 0); 260 | transform: translate3d(-10px, 0, 0); 261 | } 262 | 263 | 20%, 40%, 60%, 80% { 264 | -webkit-transform: translate3d(10px, 0, 0); 265 | transform: translate3d(10px, 0, 0); 266 | } 267 | } 268 | 269 | .shake { 270 | -webkit-animation-name: shake; 271 | animation-name: shake; 272 | } 273 | 274 | @-webkit-keyframes swing { 275 | 20% { 276 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 277 | transform: rotate3d(0, 0, 1, 15deg); 278 | } 279 | 280 | 40% { 281 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 282 | transform: rotate3d(0, 0, 1, -10deg); 283 | } 284 | 285 | 60% { 286 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 287 | transform: rotate3d(0, 0, 1, 5deg); 288 | } 289 | 290 | 80% { 291 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 292 | transform: rotate3d(0, 0, 1, -5deg); 293 | } 294 | 295 | 100% { 296 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 297 | transform: rotate3d(0, 0, 1, 0deg); 298 | } 299 | } 300 | 301 | @keyframes swing { 302 | 20% { 303 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 304 | transform: rotate3d(0, 0, 1, 15deg); 305 | } 306 | 307 | 40% { 308 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 309 | transform: rotate3d(0, 0, 1, -10deg); 310 | } 311 | 312 | 60% { 313 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 314 | transform: rotate3d(0, 0, 1, 5deg); 315 | } 316 | 317 | 80% { 318 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 319 | transform: rotate3d(0, 0, 1, -5deg); 320 | } 321 | 322 | 100% { 323 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 324 | transform: rotate3d(0, 0, 1, 0deg); 325 | } 326 | } 327 | 328 | .swing { 329 | -webkit-transform-origin: top center; 330 | -ms-transform-origin: top center; 331 | transform-origin: top center; 332 | -webkit-animation-name: swing; 333 | animation-name: swing; 334 | } 335 | 336 | @-webkit-keyframes tada { 337 | 0% { 338 | -webkit-transform: scale3d(1, 1, 1); 339 | transform: scale3d(1, 1, 1); 340 | } 341 | 342 | 10%, 20% { 343 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 344 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 345 | } 346 | 347 | 30%, 50%, 70%, 90% { 348 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 349 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 350 | } 351 | 352 | 40%, 60%, 80% { 353 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 354 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 355 | } 356 | 357 | 100% { 358 | -webkit-transform: scale3d(1, 1, 1); 359 | transform: scale3d(1, 1, 1); 360 | } 361 | } 362 | 363 | @keyframes tada { 364 | 0% { 365 | -webkit-transform: scale3d(1, 1, 1); 366 | transform: scale3d(1, 1, 1); 367 | } 368 | 369 | 10%, 20% { 370 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 371 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 372 | } 373 | 374 | 30%, 50%, 70%, 90% { 375 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 376 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 377 | } 378 | 379 | 40%, 60%, 80% { 380 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 381 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 382 | } 383 | 384 | 100% { 385 | -webkit-transform: scale3d(1, 1, 1); 386 | transform: scale3d(1, 1, 1); 387 | } 388 | } 389 | 390 | .tada { 391 | -webkit-animation-name: tada; 392 | animation-name: tada; 393 | } 394 | 395 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 396 | 397 | @-webkit-keyframes wobble { 398 | 0% { 399 | -webkit-transform: none; 400 | transform: none; 401 | } 402 | 403 | 15% { 404 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 405 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 406 | } 407 | 408 | 30% { 409 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 410 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 411 | } 412 | 413 | 45% { 414 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 415 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 416 | } 417 | 418 | 60% { 419 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 420 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 421 | } 422 | 423 | 75% { 424 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 425 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 426 | } 427 | 428 | 100% { 429 | -webkit-transform: none; 430 | transform: none; 431 | } 432 | } 433 | 434 | @keyframes wobble { 435 | 0% { 436 | -webkit-transform: none; 437 | transform: none; 438 | } 439 | 440 | 15% { 441 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 442 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 443 | } 444 | 445 | 30% { 446 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 447 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 448 | } 449 | 450 | 45% { 451 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 452 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 453 | } 454 | 455 | 60% { 456 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 457 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 458 | } 459 | 460 | 75% { 461 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 462 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 463 | } 464 | 465 | 100% { 466 | -webkit-transform: none; 467 | transform: none; 468 | } 469 | } 470 | 471 | .wobble { 472 | -webkit-animation-name: wobble; 473 | animation-name: wobble; 474 | } 475 | 476 | @-webkit-keyframes bounceIn { 477 | 0%, 20%, 40%, 60%, 80%, 100% { 478 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 479 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 480 | } 481 | 482 | 0% { 483 | opacity: 0; 484 | -webkit-transform: scale3d(.3, .3, .3); 485 | transform: scale3d(.3, .3, .3); 486 | } 487 | 488 | 20% { 489 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 490 | transform: scale3d(1.1, 1.1, 1.1); 491 | } 492 | 493 | 40% { 494 | -webkit-transform: scale3d(.9, .9, .9); 495 | transform: scale3d(.9, .9, .9); 496 | } 497 | 498 | 60% { 499 | opacity: 1; 500 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 501 | transform: scale3d(1.03, 1.03, 1.03); 502 | } 503 | 504 | 80% { 505 | -webkit-transform: scale3d(.97, .97, .97); 506 | transform: scale3d(.97, .97, .97); 507 | } 508 | 509 | 100% { 510 | opacity: 1; 511 | -webkit-transform: scale3d(1, 1, 1); 512 | transform: scale3d(1, 1, 1); 513 | } 514 | } 515 | 516 | @keyframes bounceIn { 517 | 0%, 20%, 40%, 60%, 80%, 100% { 518 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 519 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 520 | } 521 | 522 | 0% { 523 | opacity: 0; 524 | -webkit-transform: scale3d(.3, .3, .3); 525 | transform: scale3d(.3, .3, .3); 526 | } 527 | 528 | 20% { 529 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 530 | transform: scale3d(1.1, 1.1, 1.1); 531 | } 532 | 533 | 40% { 534 | -webkit-transform: scale3d(.9, .9, .9); 535 | transform: scale3d(.9, .9, .9); 536 | } 537 | 538 | 60% { 539 | opacity: 1; 540 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 541 | transform: scale3d(1.03, 1.03, 1.03); 542 | } 543 | 544 | 80% { 545 | -webkit-transform: scale3d(.97, .97, .97); 546 | transform: scale3d(.97, .97, .97); 547 | } 548 | 549 | 100% { 550 | opacity: 1; 551 | -webkit-transform: scale3d(1, 1, 1); 552 | transform: scale3d(1, 1, 1); 553 | } 554 | } 555 | 556 | .bounceIn { 557 | -webkit-animation-name: bounceIn; 558 | animation-name: bounceIn; 559 | -webkit-animation-duration: .75s; 560 | animation-duration: .75s; 561 | } 562 | 563 | @-webkit-keyframes bounceInDown { 564 | 0%, 60%, 75%, 90%, 100% { 565 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 566 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 567 | } 568 | 569 | 0% { 570 | opacity: 0; 571 | -webkit-transform: translate3d(0, -3000px, 0); 572 | transform: translate3d(0, -3000px, 0); 573 | } 574 | 575 | 60% { 576 | opacity: 1; 577 | -webkit-transform: translate3d(0, 25px, 0); 578 | transform: translate3d(0, 25px, 0); 579 | } 580 | 581 | 75% { 582 | -webkit-transform: translate3d(0, -10px, 0); 583 | transform: translate3d(0, -10px, 0); 584 | } 585 | 586 | 90% { 587 | -webkit-transform: translate3d(0, 5px, 0); 588 | transform: translate3d(0, 5px, 0); 589 | } 590 | 591 | 100% { 592 | -webkit-transform: none; 593 | transform: none; 594 | } 595 | } 596 | 597 | @keyframes bounceInDown { 598 | 0%, 60%, 75%, 90%, 100% { 599 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 600 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 601 | } 602 | 603 | 0% { 604 | opacity: 0; 605 | -webkit-transform: translate3d(0, -3000px, 0); 606 | transform: translate3d(0, -3000px, 0); 607 | } 608 | 609 | 60% { 610 | opacity: 1; 611 | -webkit-transform: translate3d(0, 25px, 0); 612 | transform: translate3d(0, 25px, 0); 613 | } 614 | 615 | 75% { 616 | -webkit-transform: translate3d(0, -10px, 0); 617 | transform: translate3d(0, -10px, 0); 618 | } 619 | 620 | 90% { 621 | -webkit-transform: translate3d(0, 5px, 0); 622 | transform: translate3d(0, 5px, 0); 623 | } 624 | 625 | 100% { 626 | -webkit-transform: none; 627 | transform: none; 628 | } 629 | } 630 | 631 | .bounceInDown { 632 | -webkit-animation-name: bounceInDown; 633 | animation-name: bounceInDown; 634 | } 635 | 636 | @-webkit-keyframes bounceInLeft { 637 | 0%, 60%, 75%, 90%, 100% { 638 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 639 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 640 | } 641 | 642 | 0% { 643 | opacity: 0; 644 | -webkit-transform: translate3d(-3000px, 0, 0); 645 | transform: translate3d(-3000px, 0, 0); 646 | } 647 | 648 | 60% { 649 | opacity: 1; 650 | -webkit-transform: translate3d(25px, 0, 0); 651 | transform: translate3d(25px, 0, 0); 652 | } 653 | 654 | 75% { 655 | -webkit-transform: translate3d(-10px, 0, 0); 656 | transform: translate3d(-10px, 0, 0); 657 | } 658 | 659 | 90% { 660 | -webkit-transform: translate3d(5px, 0, 0); 661 | transform: translate3d(5px, 0, 0); 662 | } 663 | 664 | 100% { 665 | -webkit-transform: none; 666 | transform: none; 667 | } 668 | } 669 | 670 | @keyframes bounceInLeft { 671 | 0%, 60%, 75%, 90%, 100% { 672 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 673 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 674 | } 675 | 676 | 0% { 677 | opacity: 0; 678 | -webkit-transform: translate3d(-3000px, 0, 0); 679 | transform: translate3d(-3000px, 0, 0); 680 | } 681 | 682 | 60% { 683 | opacity: 1; 684 | -webkit-transform: translate3d(25px, 0, 0); 685 | transform: translate3d(25px, 0, 0); 686 | } 687 | 688 | 75% { 689 | -webkit-transform: translate3d(-10px, 0, 0); 690 | transform: translate3d(-10px, 0, 0); 691 | } 692 | 693 | 90% { 694 | -webkit-transform: translate3d(5px, 0, 0); 695 | transform: translate3d(5px, 0, 0); 696 | } 697 | 698 | 100% { 699 | -webkit-transform: none; 700 | transform: none; 701 | } 702 | } 703 | 704 | .bounceInLeft { 705 | -webkit-animation-name: bounceInLeft; 706 | animation-name: bounceInLeft; 707 | } 708 | 709 | @-webkit-keyframes bounceInRight { 710 | 0%, 60%, 75%, 90%, 100% { 711 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 712 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 713 | } 714 | 715 | 0% { 716 | opacity: 0; 717 | -webkit-transform: translate3d(3000px, 0, 0); 718 | transform: translate3d(3000px, 0, 0); 719 | } 720 | 721 | 60% { 722 | opacity: 1; 723 | -webkit-transform: translate3d(-25px, 0, 0); 724 | transform: translate3d(-25px, 0, 0); 725 | } 726 | 727 | 75% { 728 | -webkit-transform: translate3d(10px, 0, 0); 729 | transform: translate3d(10px, 0, 0); 730 | } 731 | 732 | 90% { 733 | -webkit-transform: translate3d(-5px, 0, 0); 734 | transform: translate3d(-5px, 0, 0); 735 | } 736 | 737 | 100% { 738 | -webkit-transform: none; 739 | transform: none; 740 | } 741 | } 742 | 743 | @keyframes bounceInRight { 744 | 0%, 60%, 75%, 90%, 100% { 745 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 746 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 747 | } 748 | 749 | 0% { 750 | opacity: 0; 751 | -webkit-transform: translate3d(3000px, 0, 0); 752 | transform: translate3d(3000px, 0, 0); 753 | } 754 | 755 | 60% { 756 | opacity: 1; 757 | -webkit-transform: translate3d(-25px, 0, 0); 758 | transform: translate3d(-25px, 0, 0); 759 | } 760 | 761 | 75% { 762 | -webkit-transform: translate3d(10px, 0, 0); 763 | transform: translate3d(10px, 0, 0); 764 | } 765 | 766 | 90% { 767 | -webkit-transform: translate3d(-5px, 0, 0); 768 | transform: translate3d(-5px, 0, 0); 769 | } 770 | 771 | 100% { 772 | -webkit-transform: none; 773 | transform: none; 774 | } 775 | } 776 | 777 | .bounceInRight { 778 | -webkit-animation-name: bounceInRight; 779 | animation-name: bounceInRight; 780 | } 781 | 782 | @-webkit-keyframes bounceInUp { 783 | 0%, 60%, 75%, 90%, 100% { 784 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 785 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 786 | } 787 | 788 | 0% { 789 | opacity: 0; 790 | -webkit-transform: translate3d(0, 3000px, 0); 791 | transform: translate3d(0, 3000px, 0); 792 | } 793 | 794 | 60% { 795 | opacity: 1; 796 | -webkit-transform: translate3d(0, -20px, 0); 797 | transform: translate3d(0, -20px, 0); 798 | } 799 | 800 | 75% { 801 | -webkit-transform: translate3d(0, 10px, 0); 802 | transform: translate3d(0, 10px, 0); 803 | } 804 | 805 | 90% { 806 | -webkit-transform: translate3d(0, -5px, 0); 807 | transform: translate3d(0, -5px, 0); 808 | } 809 | 810 | 100% { 811 | -webkit-transform: translate3d(0, 0, 0); 812 | transform: translate3d(0, 0, 0); 813 | } 814 | } 815 | 816 | @keyframes bounceInUp { 817 | 0%, 60%, 75%, 90%, 100% { 818 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 819 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 820 | } 821 | 822 | 0% { 823 | opacity: 0; 824 | -webkit-transform: translate3d(0, 3000px, 0); 825 | transform: translate3d(0, 3000px, 0); 826 | } 827 | 828 | 60% { 829 | opacity: 1; 830 | -webkit-transform: translate3d(0, -20px, 0); 831 | transform: translate3d(0, -20px, 0); 832 | } 833 | 834 | 75% { 835 | -webkit-transform: translate3d(0, 10px, 0); 836 | transform: translate3d(0, 10px, 0); 837 | } 838 | 839 | 90% { 840 | -webkit-transform: translate3d(0, -5px, 0); 841 | transform: translate3d(0, -5px, 0); 842 | } 843 | 844 | 100% { 845 | -webkit-transform: translate3d(0, 0, 0); 846 | transform: translate3d(0, 0, 0); 847 | } 848 | } 849 | 850 | .bounceInUp { 851 | -webkit-animation-name: bounceInUp; 852 | animation-name: bounceInUp; 853 | } 854 | 855 | @-webkit-keyframes bounceOut { 856 | 20% { 857 | -webkit-transform: scale3d(.9, .9, .9); 858 | transform: scale3d(.9, .9, .9); 859 | } 860 | 861 | 50%, 55% { 862 | opacity: 1; 863 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 864 | transform: scale3d(1.1, 1.1, 1.1); 865 | } 866 | 867 | 100% { 868 | opacity: 0; 869 | -webkit-transform: scale3d(.3, .3, .3); 870 | transform: scale3d(.3, .3, .3); 871 | } 872 | } 873 | 874 | @keyframes bounceOut { 875 | 20% { 876 | -webkit-transform: scale3d(.9, .9, .9); 877 | transform: scale3d(.9, .9, .9); 878 | } 879 | 880 | 50%, 55% { 881 | opacity: 1; 882 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 883 | transform: scale3d(1.1, 1.1, 1.1); 884 | } 885 | 886 | 100% { 887 | opacity: 0; 888 | -webkit-transform: scale3d(.3, .3, .3); 889 | transform: scale3d(.3, .3, .3); 890 | } 891 | } 892 | 893 | .bounceOut { 894 | -webkit-animation-name: bounceOut; 895 | animation-name: bounceOut; 896 | -webkit-animation-duration: .75s; 897 | animation-duration: .75s; 898 | } 899 | 900 | @-webkit-keyframes bounceOutDown { 901 | 20% { 902 | -webkit-transform: translate3d(0, 10px, 0); 903 | transform: translate3d(0, 10px, 0); 904 | } 905 | 906 | 40%, 45% { 907 | opacity: 1; 908 | -webkit-transform: translate3d(0, -20px, 0); 909 | transform: translate3d(0, -20px, 0); 910 | } 911 | 912 | 100% { 913 | opacity: 0; 914 | -webkit-transform: translate3d(0, 2000px, 0); 915 | transform: translate3d(0, 2000px, 0); 916 | } 917 | } 918 | 919 | @keyframes bounceOutDown { 920 | 20% { 921 | -webkit-transform: translate3d(0, 10px, 0); 922 | transform: translate3d(0, 10px, 0); 923 | } 924 | 925 | 40%, 45% { 926 | opacity: 1; 927 | -webkit-transform: translate3d(0, -20px, 0); 928 | transform: translate3d(0, -20px, 0); 929 | } 930 | 931 | 100% { 932 | opacity: 0; 933 | -webkit-transform: translate3d(0, 2000px, 0); 934 | transform: translate3d(0, 2000px, 0); 935 | } 936 | } 937 | 938 | .bounceOutDown { 939 | -webkit-animation-name: bounceOutDown; 940 | animation-name: bounceOutDown; 941 | } 942 | 943 | @-webkit-keyframes bounceOutLeft { 944 | 20% { 945 | opacity: 1; 946 | -webkit-transform: translate3d(20px, 0, 0); 947 | transform: translate3d(20px, 0, 0); 948 | } 949 | 950 | 100% { 951 | opacity: 0; 952 | -webkit-transform: translate3d(-2000px, 0, 0); 953 | transform: translate3d(-2000px, 0, 0); 954 | } 955 | } 956 | 957 | @keyframes bounceOutLeft { 958 | 20% { 959 | opacity: 1; 960 | -webkit-transform: translate3d(20px, 0, 0); 961 | transform: translate3d(20px, 0, 0); 962 | } 963 | 964 | 100% { 965 | opacity: 0; 966 | -webkit-transform: translate3d(-2000px, 0, 0); 967 | transform: translate3d(-2000px, 0, 0); 968 | } 969 | } 970 | 971 | .bounceOutLeft { 972 | -webkit-animation-name: bounceOutLeft; 973 | animation-name: bounceOutLeft; 974 | } 975 | 976 | @-webkit-keyframes bounceOutRight { 977 | 20% { 978 | opacity: 1; 979 | -webkit-transform: translate3d(-20px, 0, 0); 980 | transform: translate3d(-20px, 0, 0); 981 | } 982 | 983 | 100% { 984 | opacity: 0; 985 | -webkit-transform: translate3d(2000px, 0, 0); 986 | transform: translate3d(2000px, 0, 0); 987 | } 988 | } 989 | 990 | @keyframes bounceOutRight { 991 | 20% { 992 | opacity: 1; 993 | -webkit-transform: translate3d(-20px, 0, 0); 994 | transform: translate3d(-20px, 0, 0); 995 | } 996 | 997 | 100% { 998 | opacity: 0; 999 | -webkit-transform: translate3d(2000px, 0, 0); 1000 | transform: translate3d(2000px, 0, 0); 1001 | } 1002 | } 1003 | 1004 | .bounceOutRight { 1005 | -webkit-animation-name: bounceOutRight; 1006 | animation-name: bounceOutRight; 1007 | } 1008 | 1009 | @-webkit-keyframes bounceOutUp { 1010 | 20% { 1011 | -webkit-transform: translate3d(0, -10px, 0); 1012 | transform: translate3d(0, -10px, 0); 1013 | } 1014 | 1015 | 40%, 45% { 1016 | opacity: 1; 1017 | -webkit-transform: translate3d(0, 20px, 0); 1018 | transform: translate3d(0, 20px, 0); 1019 | } 1020 | 1021 | 100% { 1022 | opacity: 0; 1023 | -webkit-transform: translate3d(0, -2000px, 0); 1024 | transform: translate3d(0, -2000px, 0); 1025 | } 1026 | } 1027 | 1028 | @keyframes bounceOutUp { 1029 | 20% { 1030 | -webkit-transform: translate3d(0, -10px, 0); 1031 | transform: translate3d(0, -10px, 0); 1032 | } 1033 | 1034 | 40%, 45% { 1035 | opacity: 1; 1036 | -webkit-transform: translate3d(0, 20px, 0); 1037 | transform: translate3d(0, 20px, 0); 1038 | } 1039 | 1040 | 100% { 1041 | opacity: 0; 1042 | -webkit-transform: translate3d(0, -2000px, 0); 1043 | transform: translate3d(0, -2000px, 0); 1044 | } 1045 | } 1046 | 1047 | .bounceOutUp { 1048 | -webkit-animation-name: bounceOutUp; 1049 | animation-name: bounceOutUp; 1050 | } 1051 | 1052 | @-webkit-keyframes fadeIn { 1053 | 0% {opacity: 0;} 1054 | 100% {opacity: 1;} 1055 | } 1056 | 1057 | @keyframes fadeIn { 1058 | 0% {opacity: 0;} 1059 | 100% {opacity: 1;} 1060 | } 1061 | 1062 | .fadeIn { 1063 | -webkit-animation-name: fadeIn; 1064 | animation-name: fadeIn; 1065 | } 1066 | 1067 | @-webkit-keyframes fadeInDown { 1068 | 0% { 1069 | opacity: 0; 1070 | -webkit-transform: translate3d(0, -100%, 0); 1071 | transform: translate3d(0, -100%, 0); 1072 | } 1073 | 1074 | 100% { 1075 | opacity: 1; 1076 | -webkit-transform: none; 1077 | transform: none; 1078 | } 1079 | } 1080 | 1081 | @keyframes fadeInDown { 1082 | 0% { 1083 | opacity: 0; 1084 | -webkit-transform: translate3d(0, -100%, 0); 1085 | transform: translate3d(0, -100%, 0); 1086 | } 1087 | 1088 | 100% { 1089 | opacity: 1; 1090 | -webkit-transform: none; 1091 | transform: none; 1092 | } 1093 | } 1094 | 1095 | .fadeInDown { 1096 | -webkit-animation-name: fadeInDown; 1097 | animation-name: fadeInDown; 1098 | } 1099 | 1100 | @-webkit-keyframes fadeInDownBig { 1101 | 0% { 1102 | opacity: 0; 1103 | -webkit-transform: translate3d(0, -2000px, 0); 1104 | transform: translate3d(0, -2000px, 0); 1105 | } 1106 | 1107 | 100% { 1108 | opacity: 1; 1109 | -webkit-transform: none; 1110 | transform: none; 1111 | } 1112 | } 1113 | 1114 | @keyframes fadeInDownBig { 1115 | 0% { 1116 | opacity: 0; 1117 | -webkit-transform: translate3d(0, -2000px, 0); 1118 | transform: translate3d(0, -2000px, 0); 1119 | } 1120 | 1121 | 100% { 1122 | opacity: 1; 1123 | -webkit-transform: none; 1124 | transform: none; 1125 | } 1126 | } 1127 | 1128 | .fadeInDownBig { 1129 | -webkit-animation-name: fadeInDownBig; 1130 | animation-name: fadeInDownBig; 1131 | } 1132 | 1133 | @-webkit-keyframes fadeInLeft { 1134 | 0% { 1135 | opacity: 0; 1136 | -webkit-transform: translate3d(-100%, 0, 0); 1137 | transform: translate3d(-100%, 0, 0); 1138 | } 1139 | 1140 | 100% { 1141 | opacity: 1; 1142 | -webkit-transform: none; 1143 | transform: none; 1144 | } 1145 | } 1146 | 1147 | @keyframes fadeInLeft { 1148 | 0% { 1149 | opacity: 0; 1150 | -webkit-transform: translate3d(-100%, 0, 0); 1151 | transform: translate3d(-100%, 0, 0); 1152 | } 1153 | 1154 | 100% { 1155 | opacity: 1; 1156 | -webkit-transform: none; 1157 | transform: none; 1158 | } 1159 | } 1160 | 1161 | .fadeInLeft { 1162 | -webkit-animation-name: fadeInLeft; 1163 | animation-name: fadeInLeft; 1164 | } 1165 | 1166 | @-webkit-keyframes fadeInLeftBig { 1167 | 0% { 1168 | opacity: 0; 1169 | -webkit-transform: translate3d(-2000px, 0, 0); 1170 | transform: translate3d(-2000px, 0, 0); 1171 | } 1172 | 1173 | 100% { 1174 | opacity: 1; 1175 | -webkit-transform: none; 1176 | transform: none; 1177 | } 1178 | } 1179 | 1180 | @keyframes fadeInLeftBig { 1181 | 0% { 1182 | opacity: 0; 1183 | -webkit-transform: translate3d(-2000px, 0, 0); 1184 | transform: translate3d(-2000px, 0, 0); 1185 | } 1186 | 1187 | 100% { 1188 | opacity: 1; 1189 | -webkit-transform: none; 1190 | transform: none; 1191 | } 1192 | } 1193 | 1194 | .fadeInLeftBig { 1195 | -webkit-animation-name: fadeInLeftBig; 1196 | animation-name: fadeInLeftBig; 1197 | } 1198 | 1199 | @-webkit-keyframes fadeInRight { 1200 | 0% { 1201 | opacity: 0; 1202 | -webkit-transform: translate3d(100%, 0, 0); 1203 | transform: translate3d(100%, 0, 0); 1204 | } 1205 | 1206 | 100% { 1207 | opacity: 1; 1208 | -webkit-transform: none; 1209 | transform: none; 1210 | } 1211 | } 1212 | 1213 | @keyframes fadeInRight { 1214 | 0% { 1215 | opacity: 0; 1216 | -webkit-transform: translate3d(100%, 0, 0); 1217 | transform: translate3d(100%, 0, 0); 1218 | } 1219 | 1220 | 100% { 1221 | opacity: 1; 1222 | -webkit-transform: none; 1223 | transform: none; 1224 | } 1225 | } 1226 | 1227 | .fadeInRight { 1228 | -webkit-animation-name: fadeInRight; 1229 | animation-name: fadeInRight; 1230 | } 1231 | 1232 | @-webkit-keyframes fadeInRightBig { 1233 | 0% { 1234 | opacity: 0; 1235 | -webkit-transform: translate3d(2000px, 0, 0); 1236 | transform: translate3d(2000px, 0, 0); 1237 | } 1238 | 1239 | 100% { 1240 | opacity: 1; 1241 | -webkit-transform: none; 1242 | transform: none; 1243 | } 1244 | } 1245 | 1246 | @keyframes fadeInRightBig { 1247 | 0% { 1248 | opacity: 0; 1249 | -webkit-transform: translate3d(2000px, 0, 0); 1250 | transform: translate3d(2000px, 0, 0); 1251 | } 1252 | 1253 | 100% { 1254 | opacity: 1; 1255 | -webkit-transform: none; 1256 | transform: none; 1257 | } 1258 | } 1259 | 1260 | .fadeInRightBig { 1261 | -webkit-animation-name: fadeInRightBig; 1262 | animation-name: fadeInRightBig; 1263 | } 1264 | 1265 | @-webkit-keyframes fadeInUp { 1266 | 0% { 1267 | opacity: 0; 1268 | -webkit-transform: translate3d(0, 100%, 0); 1269 | transform: translate3d(0, 100%, 0); 1270 | } 1271 | 1272 | 100% { 1273 | opacity: 1; 1274 | -webkit-transform: none; 1275 | transform: none; 1276 | } 1277 | } 1278 | 1279 | @keyframes fadeInUp { 1280 | 0% { 1281 | opacity: 0; 1282 | -webkit-transform: translate3d(0, 100%, 0); 1283 | transform: translate3d(0, 100%, 0); 1284 | } 1285 | 1286 | 100% { 1287 | opacity: 1; 1288 | -webkit-transform: none; 1289 | transform: none; 1290 | } 1291 | } 1292 | 1293 | .fadeInUp { 1294 | -webkit-animation-name: fadeInUp; 1295 | animation-name: fadeInUp; 1296 | } 1297 | 1298 | @-webkit-keyframes fadeInUpBig { 1299 | 0% { 1300 | opacity: 0; 1301 | -webkit-transform: translate3d(0, 2000px, 0); 1302 | transform: translate3d(0, 2000px, 0); 1303 | } 1304 | 1305 | 100% { 1306 | opacity: 1; 1307 | -webkit-transform: none; 1308 | transform: none; 1309 | } 1310 | } 1311 | 1312 | @keyframes fadeInUpBig { 1313 | 0% { 1314 | opacity: 0; 1315 | -webkit-transform: translate3d(0, 2000px, 0); 1316 | transform: translate3d(0, 2000px, 0); 1317 | } 1318 | 1319 | 100% { 1320 | opacity: 1; 1321 | -webkit-transform: none; 1322 | transform: none; 1323 | } 1324 | } 1325 | 1326 | .fadeInUpBig { 1327 | -webkit-animation-name: fadeInUpBig; 1328 | animation-name: fadeInUpBig; 1329 | } 1330 | 1331 | @-webkit-keyframes fadeOut { 1332 | 0% {opacity: 1;} 1333 | 100% {opacity: 0;} 1334 | } 1335 | 1336 | @keyframes fadeOut { 1337 | 0% {opacity: 1;} 1338 | 100% {opacity: 0;} 1339 | } 1340 | 1341 | .fadeOut { 1342 | -webkit-animation-name: fadeOut; 1343 | animation-name: fadeOut; 1344 | } 1345 | 1346 | @-webkit-keyframes fadeOutDown { 1347 | 0% { 1348 | opacity: 1; 1349 | } 1350 | 1351 | 100% { 1352 | opacity: 0; 1353 | -webkit-transform: translate3d(0, 100%, 0); 1354 | transform: translate3d(0, 100%, 0); 1355 | } 1356 | } 1357 | 1358 | @keyframes fadeOutDown { 1359 | 0% { 1360 | opacity: 1; 1361 | } 1362 | 1363 | 100% { 1364 | opacity: 0; 1365 | -webkit-transform: translate3d(0, 100%, 0); 1366 | transform: translate3d(0, 100%, 0); 1367 | } 1368 | } 1369 | 1370 | .fadeOutDown { 1371 | -webkit-animation-name: fadeOutDown; 1372 | animation-name: fadeOutDown; 1373 | } 1374 | 1375 | @-webkit-keyframes fadeOutDownBig { 1376 | 0% { 1377 | opacity: 1; 1378 | } 1379 | 1380 | 100% { 1381 | opacity: 0; 1382 | -webkit-transform: translate3d(0, 2000px, 0); 1383 | transform: translate3d(0, 2000px, 0); 1384 | } 1385 | } 1386 | 1387 | @keyframes fadeOutDownBig { 1388 | 0% { 1389 | opacity: 1; 1390 | } 1391 | 1392 | 100% { 1393 | opacity: 0; 1394 | -webkit-transform: translate3d(0, 2000px, 0); 1395 | transform: translate3d(0, 2000px, 0); 1396 | } 1397 | } 1398 | 1399 | .fadeOutDownBig { 1400 | -webkit-animation-name: fadeOutDownBig; 1401 | animation-name: fadeOutDownBig; 1402 | } 1403 | 1404 | @-webkit-keyframes fadeOutLeft { 1405 | 0% { 1406 | opacity: 1; 1407 | } 1408 | 1409 | 100% { 1410 | opacity: 0; 1411 | -webkit-transform: translate3d(-100%, 0, 0); 1412 | transform: translate3d(-100%, 0, 0); 1413 | } 1414 | } 1415 | 1416 | @keyframes fadeOutLeft { 1417 | 0% { 1418 | opacity: 1; 1419 | } 1420 | 1421 | 100% { 1422 | opacity: 0; 1423 | -webkit-transform: translate3d(-100%, 0, 0); 1424 | transform: translate3d(-100%, 0, 0); 1425 | } 1426 | } 1427 | 1428 | .fadeOutLeft { 1429 | -webkit-animation-name: fadeOutLeft; 1430 | animation-name: fadeOutLeft; 1431 | } 1432 | 1433 | @-webkit-keyframes fadeOutLeftBig { 1434 | 0% { 1435 | opacity: 1; 1436 | } 1437 | 1438 | 100% { 1439 | opacity: 0; 1440 | -webkit-transform: translate3d(-2000px, 0, 0); 1441 | transform: translate3d(-2000px, 0, 0); 1442 | } 1443 | } 1444 | 1445 | @keyframes fadeOutLeftBig { 1446 | 0% { 1447 | opacity: 1; 1448 | } 1449 | 1450 | 100% { 1451 | opacity: 0; 1452 | -webkit-transform: translate3d(-2000px, 0, 0); 1453 | transform: translate3d(-2000px, 0, 0); 1454 | } 1455 | } 1456 | 1457 | .fadeOutLeftBig { 1458 | -webkit-animation-name: fadeOutLeftBig; 1459 | animation-name: fadeOutLeftBig; 1460 | } 1461 | 1462 | @-webkit-keyframes fadeOutRight { 1463 | 0% { 1464 | opacity: 1; 1465 | } 1466 | 1467 | 100% { 1468 | opacity: 0; 1469 | -webkit-transform: translate3d(100%, 0, 0); 1470 | transform: translate3d(100%, 0, 0); 1471 | } 1472 | } 1473 | 1474 | @keyframes fadeOutRight { 1475 | 0% { 1476 | opacity: 1; 1477 | } 1478 | 1479 | 100% { 1480 | opacity: 0; 1481 | -webkit-transform: translate3d(100%, 0, 0); 1482 | transform: translate3d(100%, 0, 0); 1483 | } 1484 | } 1485 | 1486 | .fadeOutRight { 1487 | -webkit-animation-name: fadeOutRight; 1488 | animation-name: fadeOutRight; 1489 | } 1490 | 1491 | @-webkit-keyframes fadeOutRightBig { 1492 | 0% { 1493 | opacity: 1; 1494 | } 1495 | 1496 | 100% { 1497 | opacity: 0; 1498 | -webkit-transform: translate3d(2000px, 0, 0); 1499 | transform: translate3d(2000px, 0, 0); 1500 | } 1501 | } 1502 | 1503 | @keyframes fadeOutRightBig { 1504 | 0% { 1505 | opacity: 1; 1506 | } 1507 | 1508 | 100% { 1509 | opacity: 0; 1510 | -webkit-transform: translate3d(2000px, 0, 0); 1511 | transform: translate3d(2000px, 0, 0); 1512 | } 1513 | } 1514 | 1515 | .fadeOutRightBig { 1516 | -webkit-animation-name: fadeOutRightBig; 1517 | animation-name: fadeOutRightBig; 1518 | } 1519 | 1520 | @-webkit-keyframes fadeOutUp { 1521 | 0% { 1522 | opacity: 1; 1523 | } 1524 | 1525 | 100% { 1526 | opacity: 0; 1527 | -webkit-transform: translate3d(0, -100%, 0); 1528 | transform: translate3d(0, -100%, 0); 1529 | } 1530 | } 1531 | 1532 | @keyframes fadeOutUp { 1533 | 0% { 1534 | opacity: 1; 1535 | } 1536 | 1537 | 100% { 1538 | opacity: 0; 1539 | -webkit-transform: translate3d(0, -100%, 0); 1540 | transform: translate3d(0, -100%, 0); 1541 | } 1542 | } 1543 | 1544 | .fadeOutUp { 1545 | -webkit-animation-name: fadeOutUp; 1546 | animation-name: fadeOutUp; 1547 | } 1548 | 1549 | @-webkit-keyframes fadeOutUpBig { 1550 | 0% { 1551 | opacity: 1; 1552 | } 1553 | 1554 | 100% { 1555 | opacity: 0; 1556 | -webkit-transform: translate3d(0, -2000px, 0); 1557 | transform: translate3d(0, -2000px, 0); 1558 | } 1559 | } 1560 | 1561 | @keyframes fadeOutUpBig { 1562 | 0% { 1563 | opacity: 1; 1564 | } 1565 | 1566 | 100% { 1567 | opacity: 0; 1568 | -webkit-transform: translate3d(0, -2000px, 0); 1569 | transform: translate3d(0, -2000px, 0); 1570 | } 1571 | } 1572 | 1573 | .fadeOutUpBig { 1574 | -webkit-animation-name: fadeOutUpBig; 1575 | animation-name: fadeOutUpBig; 1576 | } 1577 | 1578 | @-webkit-keyframes flip { 1579 | 0% { 1580 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1581 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1582 | -webkit-animation-timing-function: ease-out; 1583 | animation-timing-function: ease-out; 1584 | } 1585 | 1586 | 40% { 1587 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1588 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1589 | -webkit-animation-timing-function: ease-out; 1590 | animation-timing-function: ease-out; 1591 | } 1592 | 1593 | 50% { 1594 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1595 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1596 | -webkit-animation-timing-function: ease-in; 1597 | animation-timing-function: ease-in; 1598 | } 1599 | 1600 | 80% { 1601 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1602 | transform: perspective(400px) scale3d(.95, .95, .95); 1603 | -webkit-animation-timing-function: ease-in; 1604 | animation-timing-function: ease-in; 1605 | } 1606 | 1607 | 100% { 1608 | -webkit-transform: perspective(400px); 1609 | transform: perspective(400px); 1610 | -webkit-animation-timing-function: ease-in; 1611 | animation-timing-function: ease-in; 1612 | } 1613 | } 1614 | 1615 | @keyframes flip { 1616 | 0% { 1617 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1618 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1619 | -webkit-animation-timing-function: ease-out; 1620 | animation-timing-function: ease-out; 1621 | } 1622 | 1623 | 40% { 1624 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1625 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1626 | -webkit-animation-timing-function: ease-out; 1627 | animation-timing-function: ease-out; 1628 | } 1629 | 1630 | 50% { 1631 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1632 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1633 | -webkit-animation-timing-function: ease-in; 1634 | animation-timing-function: ease-in; 1635 | } 1636 | 1637 | 80% { 1638 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1639 | transform: perspective(400px) scale3d(.95, .95, .95); 1640 | -webkit-animation-timing-function: ease-in; 1641 | animation-timing-function: ease-in; 1642 | } 1643 | 1644 | 100% { 1645 | -webkit-transform: perspective(400px); 1646 | transform: perspective(400px); 1647 | -webkit-animation-timing-function: ease-in; 1648 | animation-timing-function: ease-in; 1649 | } 1650 | } 1651 | 1652 | .animated.flip { 1653 | -webkit-backface-visibility: visible; 1654 | backface-visibility: visible; 1655 | -webkit-animation-name: flip; 1656 | animation-name: flip; 1657 | } 1658 | 1659 | @-webkit-keyframes flipInX { 1660 | 0% { 1661 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1662 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1663 | -webkit-transition-timing-function: ease-in; 1664 | transition-timing-function: ease-in; 1665 | opacity: 0; 1666 | } 1667 | 1668 | 40% { 1669 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1670 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1671 | -webkit-transition-timing-function: ease-in; 1672 | transition-timing-function: ease-in; 1673 | } 1674 | 1675 | 60% { 1676 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1677 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1678 | opacity: 1; 1679 | } 1680 | 1681 | 80% { 1682 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1683 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1684 | } 1685 | 1686 | 100% { 1687 | -webkit-transform: perspective(400px); 1688 | transform: perspective(400px); 1689 | } 1690 | } 1691 | 1692 | @keyframes flipInX { 1693 | 0% { 1694 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1695 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1696 | -webkit-transition-timing-function: ease-in; 1697 | transition-timing-function: ease-in; 1698 | opacity: 0; 1699 | } 1700 | 1701 | 40% { 1702 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1703 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1704 | -webkit-transition-timing-function: ease-in; 1705 | transition-timing-function: ease-in; 1706 | } 1707 | 1708 | 60% { 1709 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1710 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1711 | opacity: 1; 1712 | } 1713 | 1714 | 80% { 1715 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1716 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1717 | } 1718 | 1719 | 100% { 1720 | -webkit-transform: perspective(400px); 1721 | transform: perspective(400px); 1722 | } 1723 | } 1724 | 1725 | .flipInX { 1726 | -webkit-backface-visibility: visible !important; 1727 | backface-visibility: visible !important; 1728 | -webkit-animation-name: flipInX; 1729 | animation-name: flipInX; 1730 | } 1731 | 1732 | @-webkit-keyframes flipInY { 1733 | 0% { 1734 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1735 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1736 | -webkit-transition-timing-function: ease-in; 1737 | transition-timing-function: ease-in; 1738 | opacity: 0; 1739 | } 1740 | 1741 | 40% { 1742 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1743 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1744 | -webkit-transition-timing-function: ease-in; 1745 | transition-timing-function: ease-in; 1746 | } 1747 | 1748 | 60% { 1749 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1750 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1751 | opacity: 1; 1752 | } 1753 | 1754 | 80% { 1755 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1756 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1757 | } 1758 | 1759 | 100% { 1760 | -webkit-transform: perspective(400px); 1761 | transform: perspective(400px); 1762 | } 1763 | } 1764 | 1765 | @keyframes flipInY { 1766 | 0% { 1767 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1768 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1769 | -webkit-transition-timing-function: ease-in; 1770 | transition-timing-function: ease-in; 1771 | opacity: 0; 1772 | } 1773 | 1774 | 40% { 1775 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1776 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1777 | -webkit-transition-timing-function: ease-in; 1778 | transition-timing-function: ease-in; 1779 | } 1780 | 1781 | 60% { 1782 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1783 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1784 | opacity: 1; 1785 | } 1786 | 1787 | 80% { 1788 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1789 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1790 | } 1791 | 1792 | 100% { 1793 | -webkit-transform: perspective(400px); 1794 | transform: perspective(400px); 1795 | } 1796 | } 1797 | 1798 | .flipInY { 1799 | -webkit-backface-visibility: visible !important; 1800 | backface-visibility: visible !important; 1801 | -webkit-animation-name: flipInY; 1802 | animation-name: flipInY; 1803 | } 1804 | 1805 | @-webkit-keyframes flipOutX { 1806 | 0% { 1807 | -webkit-transform: perspective(400px); 1808 | transform: perspective(400px); 1809 | } 1810 | 1811 | 30% { 1812 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1813 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1814 | opacity: 1; 1815 | } 1816 | 1817 | 100% { 1818 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1819 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1820 | opacity: 0; 1821 | } 1822 | } 1823 | 1824 | @keyframes flipOutX { 1825 | 0% { 1826 | -webkit-transform: perspective(400px); 1827 | transform: perspective(400px); 1828 | } 1829 | 1830 | 30% { 1831 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1832 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1833 | opacity: 1; 1834 | } 1835 | 1836 | 100% { 1837 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1838 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1839 | opacity: 0; 1840 | } 1841 | } 1842 | 1843 | .flipOutX { 1844 | -webkit-animation-name: flipOutX; 1845 | animation-name: flipOutX; 1846 | -webkit-animation-duration: .75s; 1847 | animation-duration: .75s; 1848 | -webkit-backface-visibility: visible !important; 1849 | backface-visibility: visible !important; 1850 | } 1851 | 1852 | @-webkit-keyframes flipOutY { 1853 | 0% { 1854 | -webkit-transform: perspective(400px); 1855 | transform: perspective(400px); 1856 | } 1857 | 1858 | 30% { 1859 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1860 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1861 | opacity: 1; 1862 | } 1863 | 1864 | 100% { 1865 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1866 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1867 | opacity: 0; 1868 | } 1869 | } 1870 | 1871 | @keyframes flipOutY { 1872 | 0% { 1873 | -webkit-transform: perspective(400px); 1874 | transform: perspective(400px); 1875 | } 1876 | 1877 | 30% { 1878 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1879 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1880 | opacity: 1; 1881 | } 1882 | 1883 | 100% { 1884 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1885 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1886 | opacity: 0; 1887 | } 1888 | } 1889 | 1890 | .flipOutY { 1891 | -webkit-backface-visibility: visible !important; 1892 | backface-visibility: visible !important; 1893 | -webkit-animation-name: flipOutY; 1894 | animation-name: flipOutY; 1895 | -webkit-animation-duration: .75s; 1896 | animation-duration: .75s; 1897 | } 1898 | 1899 | @-webkit-keyframes lightSpeedIn { 1900 | 0% { 1901 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1902 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1903 | opacity: 0; 1904 | } 1905 | 1906 | 60% { 1907 | -webkit-transform: skewX(20deg); 1908 | transform: skewX(20deg); 1909 | opacity: 1; 1910 | } 1911 | 1912 | 80% { 1913 | -webkit-transform: skewX(-5deg); 1914 | transform: skewX(-5deg); 1915 | opacity: 1; 1916 | } 1917 | 1918 | 100% { 1919 | -webkit-transform: none; 1920 | transform: none; 1921 | opacity: 1; 1922 | } 1923 | } 1924 | 1925 | @keyframes lightSpeedIn { 1926 | 0% { 1927 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1928 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1929 | opacity: 0; 1930 | } 1931 | 1932 | 60% { 1933 | -webkit-transform: skewX(20deg); 1934 | transform: skewX(20deg); 1935 | opacity: 1; 1936 | } 1937 | 1938 | 80% { 1939 | -webkit-transform: skewX(-5deg); 1940 | transform: skewX(-5deg); 1941 | opacity: 1; 1942 | } 1943 | 1944 | 100% { 1945 | -webkit-transform: none; 1946 | transform: none; 1947 | opacity: 1; 1948 | } 1949 | } 1950 | 1951 | .lightSpeedIn { 1952 | -webkit-animation-name: lightSpeedIn; 1953 | animation-name: lightSpeedIn; 1954 | -webkit-animation-timing-function: ease-out; 1955 | animation-timing-function: ease-out; 1956 | } 1957 | 1958 | @-webkit-keyframes lightSpeedOut { 1959 | 0% { 1960 | opacity: 1; 1961 | } 1962 | 1963 | 100% { 1964 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 1965 | transform: translate3d(100%, 0, 0) skewX(30deg); 1966 | opacity: 0; 1967 | } 1968 | } 1969 | 1970 | @keyframes lightSpeedOut { 1971 | 0% { 1972 | opacity: 1; 1973 | } 1974 | 1975 | 100% { 1976 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 1977 | transform: translate3d(100%, 0, 0) skewX(30deg); 1978 | opacity: 0; 1979 | } 1980 | } 1981 | 1982 | .lightSpeedOut { 1983 | -webkit-animation-name: lightSpeedOut; 1984 | animation-name: lightSpeedOut; 1985 | -webkit-animation-timing-function: ease-in; 1986 | animation-timing-function: ease-in; 1987 | } 1988 | 1989 | @-webkit-keyframes rotateIn { 1990 | 0% { 1991 | -webkit-transform-origin: center; 1992 | transform-origin: center; 1993 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 1994 | transform: rotate3d(0, 0, 1, -200deg); 1995 | opacity: 0; 1996 | } 1997 | 1998 | 100% { 1999 | -webkit-transform-origin: center; 2000 | transform-origin: center; 2001 | -webkit-transform: none; 2002 | transform: none; 2003 | opacity: 1; 2004 | } 2005 | } 2006 | 2007 | @keyframes rotateIn { 2008 | 0% { 2009 | -webkit-transform-origin: center; 2010 | transform-origin: center; 2011 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2012 | transform: rotate3d(0, 0, 1, -200deg); 2013 | opacity: 0; 2014 | } 2015 | 2016 | 100% { 2017 | -webkit-transform-origin: center; 2018 | transform-origin: center; 2019 | -webkit-transform: none; 2020 | transform: none; 2021 | opacity: 1; 2022 | } 2023 | } 2024 | 2025 | .rotateIn { 2026 | -webkit-animation-name: rotateIn; 2027 | animation-name: rotateIn; 2028 | } 2029 | 2030 | @-webkit-keyframes rotateInDownLeft { 2031 | 0% { 2032 | -webkit-transform-origin: left bottom; 2033 | transform-origin: left bottom; 2034 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2035 | transform: rotate3d(0, 0, 1, -45deg); 2036 | opacity: 0; 2037 | } 2038 | 2039 | 100% { 2040 | -webkit-transform-origin: left bottom; 2041 | transform-origin: left bottom; 2042 | -webkit-transform: none; 2043 | transform: none; 2044 | opacity: 1; 2045 | } 2046 | } 2047 | 2048 | @keyframes rotateInDownLeft { 2049 | 0% { 2050 | -webkit-transform-origin: left bottom; 2051 | transform-origin: left bottom; 2052 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2053 | transform: rotate3d(0, 0, 1, -45deg); 2054 | opacity: 0; 2055 | } 2056 | 2057 | 100% { 2058 | -webkit-transform-origin: left bottom; 2059 | transform-origin: left bottom; 2060 | -webkit-transform: none; 2061 | transform: none; 2062 | opacity: 1; 2063 | } 2064 | } 2065 | 2066 | .rotateInDownLeft { 2067 | -webkit-animation-name: rotateInDownLeft; 2068 | animation-name: rotateInDownLeft; 2069 | } 2070 | 2071 | @-webkit-keyframes rotateInDownRight { 2072 | 0% { 2073 | -webkit-transform-origin: right bottom; 2074 | transform-origin: right bottom; 2075 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2076 | transform: rotate3d(0, 0, 1, 45deg); 2077 | opacity: 0; 2078 | } 2079 | 2080 | 100% { 2081 | -webkit-transform-origin: right bottom; 2082 | transform-origin: right bottom; 2083 | -webkit-transform: none; 2084 | transform: none; 2085 | opacity: 1; 2086 | } 2087 | } 2088 | 2089 | @keyframes rotateInDownRight { 2090 | 0% { 2091 | -webkit-transform-origin: right bottom; 2092 | transform-origin: right bottom; 2093 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2094 | transform: rotate3d(0, 0, 1, 45deg); 2095 | opacity: 0; 2096 | } 2097 | 2098 | 100% { 2099 | -webkit-transform-origin: right bottom; 2100 | transform-origin: right bottom; 2101 | -webkit-transform: none; 2102 | transform: none; 2103 | opacity: 1; 2104 | } 2105 | } 2106 | 2107 | .rotateInDownRight { 2108 | -webkit-animation-name: rotateInDownRight; 2109 | animation-name: rotateInDownRight; 2110 | } 2111 | 2112 | @-webkit-keyframes rotateInUpLeft { 2113 | 0% { 2114 | -webkit-transform-origin: left bottom; 2115 | transform-origin: left bottom; 2116 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2117 | transform: rotate3d(0, 0, 1, 45deg); 2118 | opacity: 0; 2119 | } 2120 | 2121 | 100% { 2122 | -webkit-transform-origin: left bottom; 2123 | transform-origin: left bottom; 2124 | -webkit-transform: none; 2125 | transform: none; 2126 | opacity: 1; 2127 | } 2128 | } 2129 | 2130 | @keyframes rotateInUpLeft { 2131 | 0% { 2132 | -webkit-transform-origin: left bottom; 2133 | transform-origin: left bottom; 2134 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2135 | transform: rotate3d(0, 0, 1, 45deg); 2136 | opacity: 0; 2137 | } 2138 | 2139 | 100% { 2140 | -webkit-transform-origin: left bottom; 2141 | transform-origin: left bottom; 2142 | -webkit-transform: none; 2143 | transform: none; 2144 | opacity: 1; 2145 | } 2146 | } 2147 | 2148 | .rotateInUpLeft { 2149 | -webkit-animation-name: rotateInUpLeft; 2150 | animation-name: rotateInUpLeft; 2151 | } 2152 | 2153 | @-webkit-keyframes rotateInUpRight { 2154 | 0% { 2155 | -webkit-transform-origin: right bottom; 2156 | transform-origin: right bottom; 2157 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2158 | transform: rotate3d(0, 0, 1, -90deg); 2159 | opacity: 0; 2160 | } 2161 | 2162 | 100% { 2163 | -webkit-transform-origin: right bottom; 2164 | transform-origin: right bottom; 2165 | -webkit-transform: none; 2166 | transform: none; 2167 | opacity: 1; 2168 | } 2169 | } 2170 | 2171 | @keyframes rotateInUpRight { 2172 | 0% { 2173 | -webkit-transform-origin: right bottom; 2174 | transform-origin: right bottom; 2175 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2176 | transform: rotate3d(0, 0, 1, -90deg); 2177 | opacity: 0; 2178 | } 2179 | 2180 | 100% { 2181 | -webkit-transform-origin: right bottom; 2182 | transform-origin: right bottom; 2183 | -webkit-transform: none; 2184 | transform: none; 2185 | opacity: 1; 2186 | } 2187 | } 2188 | 2189 | .rotateInUpRight { 2190 | -webkit-animation-name: rotateInUpRight; 2191 | animation-name: rotateInUpRight; 2192 | } 2193 | 2194 | @-webkit-keyframes rotateOut { 2195 | 0% { 2196 | -webkit-transform-origin: center; 2197 | transform-origin: center; 2198 | opacity: 1; 2199 | } 2200 | 2201 | 100% { 2202 | -webkit-transform-origin: center; 2203 | transform-origin: center; 2204 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2205 | transform: rotate3d(0, 0, 1, 200deg); 2206 | opacity: 0; 2207 | } 2208 | } 2209 | 2210 | @keyframes rotateOut { 2211 | 0% { 2212 | -webkit-transform-origin: center; 2213 | transform-origin: center; 2214 | opacity: 1; 2215 | } 2216 | 2217 | 100% { 2218 | -webkit-transform-origin: center; 2219 | transform-origin: center; 2220 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2221 | transform: rotate3d(0, 0, 1, 200deg); 2222 | opacity: 0; 2223 | } 2224 | } 2225 | 2226 | .rotateOut { 2227 | -webkit-animation-name: rotateOut; 2228 | animation-name: rotateOut; 2229 | } 2230 | 2231 | @-webkit-keyframes rotateOutDownLeft { 2232 | 0% { 2233 | -webkit-transform-origin: left bottom; 2234 | transform-origin: left bottom; 2235 | opacity: 1; 2236 | } 2237 | 2238 | 100% { 2239 | -webkit-transform-origin: left bottom; 2240 | transform-origin: left bottom; 2241 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2242 | transform: rotate3d(0, 0, 1, 45deg); 2243 | opacity: 0; 2244 | } 2245 | } 2246 | 2247 | @keyframes rotateOutDownLeft { 2248 | 0% { 2249 | -webkit-transform-origin: left bottom; 2250 | transform-origin: left bottom; 2251 | opacity: 1; 2252 | } 2253 | 2254 | 100% { 2255 | -webkit-transform-origin: left bottom; 2256 | transform-origin: left bottom; 2257 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2258 | transform: rotate3d(0, 0, 1, 45deg); 2259 | opacity: 0; 2260 | } 2261 | } 2262 | 2263 | .rotateOutDownLeft { 2264 | -webkit-animation-name: rotateOutDownLeft; 2265 | animation-name: rotateOutDownLeft; 2266 | } 2267 | 2268 | @-webkit-keyframes rotateOutDownRight { 2269 | 0% { 2270 | -webkit-transform-origin: right bottom; 2271 | transform-origin: right bottom; 2272 | opacity: 1; 2273 | } 2274 | 2275 | 100% { 2276 | -webkit-transform-origin: right bottom; 2277 | transform-origin: right bottom; 2278 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2279 | transform: rotate3d(0, 0, 1, -45deg); 2280 | opacity: 0; 2281 | } 2282 | } 2283 | 2284 | @keyframes rotateOutDownRight { 2285 | 0% { 2286 | -webkit-transform-origin: right bottom; 2287 | transform-origin: right bottom; 2288 | opacity: 1; 2289 | } 2290 | 2291 | 100% { 2292 | -webkit-transform-origin: right bottom; 2293 | transform-origin: right bottom; 2294 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2295 | transform: rotate3d(0, 0, 1, -45deg); 2296 | opacity: 0; 2297 | } 2298 | } 2299 | 2300 | .rotateOutDownRight { 2301 | -webkit-animation-name: rotateOutDownRight; 2302 | animation-name: rotateOutDownRight; 2303 | } 2304 | 2305 | @-webkit-keyframes rotateOutUpLeft { 2306 | 0% { 2307 | -webkit-transform-origin: left bottom; 2308 | transform-origin: left bottom; 2309 | opacity: 1; 2310 | } 2311 | 2312 | 100% { 2313 | -webkit-transform-origin: left bottom; 2314 | transform-origin: left bottom; 2315 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2316 | transform: rotate3d(0, 0, 1, -45deg); 2317 | opacity: 0; 2318 | } 2319 | } 2320 | 2321 | @keyframes rotateOutUpLeft { 2322 | 0% { 2323 | -webkit-transform-origin: left bottom; 2324 | transform-origin: left bottom; 2325 | opacity: 1; 2326 | } 2327 | 2328 | 100% { 2329 | -webkit-transform-origin: left bottom; 2330 | transform-origin: left bottom; 2331 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2332 | transform: rotate3d(0, 0, 1, -45deg); 2333 | opacity: 0; 2334 | } 2335 | } 2336 | 2337 | .rotateOutUpLeft { 2338 | -webkit-animation-name: rotateOutUpLeft; 2339 | animation-name: rotateOutUpLeft; 2340 | } 2341 | 2342 | @-webkit-keyframes rotateOutUpRight { 2343 | 0% { 2344 | -webkit-transform-origin: right bottom; 2345 | transform-origin: right bottom; 2346 | opacity: 1; 2347 | } 2348 | 2349 | 100% { 2350 | -webkit-transform-origin: right bottom; 2351 | transform-origin: right bottom; 2352 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2353 | transform: rotate3d(0, 0, 1, 90deg); 2354 | opacity: 0; 2355 | } 2356 | } 2357 | 2358 | @keyframes rotateOutUpRight { 2359 | 0% { 2360 | -webkit-transform-origin: right bottom; 2361 | transform-origin: right bottom; 2362 | opacity: 1; 2363 | } 2364 | 2365 | 100% { 2366 | -webkit-transform-origin: right bottom; 2367 | transform-origin: right bottom; 2368 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2369 | transform: rotate3d(0, 0, 1, 90deg); 2370 | opacity: 0; 2371 | } 2372 | } 2373 | 2374 | .rotateOutUpRight { 2375 | -webkit-animation-name: rotateOutUpRight; 2376 | animation-name: rotateOutUpRight; 2377 | } 2378 | 2379 | @-webkit-keyframes hinge { 2380 | 0% { 2381 | -webkit-transform-origin: top left; 2382 | transform-origin: top left; 2383 | -webkit-animation-timing-function: ease-in-out; 2384 | animation-timing-function: ease-in-out; 2385 | } 2386 | 2387 | 20%, 60% { 2388 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2389 | transform: rotate3d(0, 0, 1, 80deg); 2390 | -webkit-transform-origin: top left; 2391 | transform-origin: top left; 2392 | -webkit-animation-timing-function: ease-in-out; 2393 | animation-timing-function: ease-in-out; 2394 | } 2395 | 2396 | 40%, 80% { 2397 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2398 | transform: rotate3d(0, 0, 1, 60deg); 2399 | -webkit-transform-origin: top left; 2400 | transform-origin: top left; 2401 | -webkit-animation-timing-function: ease-in-out; 2402 | animation-timing-function: ease-in-out; 2403 | opacity: 1; 2404 | } 2405 | 2406 | 100% { 2407 | -webkit-transform: translate3d(0, 700px, 0); 2408 | transform: translate3d(0, 700px, 0); 2409 | opacity: 0; 2410 | } 2411 | } 2412 | 2413 | @keyframes hinge { 2414 | 0% { 2415 | -webkit-transform-origin: top left; 2416 | transform-origin: top left; 2417 | -webkit-animation-timing-function: ease-in-out; 2418 | animation-timing-function: ease-in-out; 2419 | } 2420 | 2421 | 20%, 60% { 2422 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2423 | transform: rotate3d(0, 0, 1, 80deg); 2424 | -webkit-transform-origin: top left; 2425 | transform-origin: top left; 2426 | -webkit-animation-timing-function: ease-in-out; 2427 | animation-timing-function: ease-in-out; 2428 | } 2429 | 2430 | 40%, 80% { 2431 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2432 | transform: rotate3d(0, 0, 1, 60deg); 2433 | -webkit-transform-origin: top left; 2434 | transform-origin: top left; 2435 | -webkit-animation-timing-function: ease-in-out; 2436 | animation-timing-function: ease-in-out; 2437 | opacity: 1; 2438 | } 2439 | 2440 | 100% { 2441 | -webkit-transform: translate3d(0, 700px, 0); 2442 | transform: translate3d(0, 700px, 0); 2443 | opacity: 0; 2444 | } 2445 | } 2446 | 2447 | .hinge { 2448 | -webkit-animation-name: hinge; 2449 | animation-name: hinge; 2450 | } 2451 | 2452 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2453 | 2454 | @-webkit-keyframes rollIn { 2455 | 0% { 2456 | opacity: 0; 2457 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2458 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2459 | } 2460 | 2461 | 100% { 2462 | opacity: 1; 2463 | -webkit-transform: none; 2464 | transform: none; 2465 | } 2466 | } 2467 | 2468 | @keyframes rollIn { 2469 | 0% { 2470 | opacity: 0; 2471 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2472 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2473 | } 2474 | 2475 | 100% { 2476 | opacity: 1; 2477 | -webkit-transform: none; 2478 | transform: none; 2479 | } 2480 | } 2481 | 2482 | .rollIn { 2483 | -webkit-animation-name: rollIn; 2484 | animation-name: rollIn; 2485 | } 2486 | 2487 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2488 | 2489 | @-webkit-keyframes rollOut { 2490 | 0% { 2491 | opacity: 1; 2492 | } 2493 | 2494 | 100% { 2495 | opacity: 0; 2496 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2497 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2498 | } 2499 | } 2500 | 2501 | @keyframes rollOut { 2502 | 0% { 2503 | opacity: 1; 2504 | } 2505 | 2506 | 100% { 2507 | opacity: 0; 2508 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2509 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2510 | } 2511 | } 2512 | 2513 | .rollOut { 2514 | -webkit-animation-name: rollOut; 2515 | animation-name: rollOut; 2516 | } 2517 | 2518 | @-webkit-keyframes zoomIn { 2519 | 0% { 2520 | opacity: 0; 2521 | -webkit-transform: scale3d(.3, .3, .3); 2522 | transform: scale3d(.3, .3, .3); 2523 | } 2524 | 2525 | 50% { 2526 | opacity: 1; 2527 | } 2528 | } 2529 | 2530 | @keyframes zoomIn { 2531 | 0% { 2532 | opacity: 0; 2533 | -webkit-transform: scale3d(.3, .3, .3); 2534 | transform: scale3d(.3, .3, .3); 2535 | } 2536 | 2537 | 50% { 2538 | opacity: 1; 2539 | } 2540 | } 2541 | 2542 | .zoomIn { 2543 | -webkit-animation-name: zoomIn; 2544 | animation-name: zoomIn; 2545 | } 2546 | 2547 | @-webkit-keyframes zoomInDown { 2548 | 0% { 2549 | opacity: 0; 2550 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2551 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2552 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2553 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2554 | } 2555 | 2556 | 60% { 2557 | opacity: 1; 2558 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2559 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2560 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2561 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2562 | } 2563 | } 2564 | 2565 | @keyframes zoomInDown { 2566 | 0% { 2567 | opacity: 0; 2568 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2569 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2570 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2571 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2572 | } 2573 | 2574 | 60% { 2575 | opacity: 1; 2576 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2577 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2578 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2579 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2580 | } 2581 | } 2582 | 2583 | .zoomInDown { 2584 | -webkit-animation-name: zoomInDown; 2585 | animation-name: zoomInDown; 2586 | } 2587 | 2588 | @-webkit-keyframes zoomInLeft { 2589 | 0% { 2590 | opacity: 0; 2591 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2592 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2593 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2594 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2595 | } 2596 | 2597 | 60% { 2598 | opacity: 1; 2599 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2600 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2601 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2602 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2603 | } 2604 | } 2605 | 2606 | @keyframes zoomInLeft { 2607 | 0% { 2608 | opacity: 0; 2609 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2610 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2611 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2612 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2613 | } 2614 | 2615 | 60% { 2616 | opacity: 1; 2617 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2618 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2619 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2620 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2621 | } 2622 | } 2623 | 2624 | .zoomInLeft { 2625 | -webkit-animation-name: zoomInLeft; 2626 | animation-name: zoomInLeft; 2627 | } 2628 | 2629 | @-webkit-keyframes zoomInRight { 2630 | 0% { 2631 | opacity: 0; 2632 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2633 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2634 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2635 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2636 | } 2637 | 2638 | 60% { 2639 | opacity: 1; 2640 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2641 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2642 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2643 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2644 | } 2645 | } 2646 | 2647 | @keyframes zoomInRight { 2648 | 0% { 2649 | opacity: 0; 2650 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2651 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2652 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2653 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2654 | } 2655 | 2656 | 60% { 2657 | opacity: 1; 2658 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2659 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2660 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2661 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2662 | } 2663 | } 2664 | 2665 | .zoomInRight { 2666 | -webkit-animation-name: zoomInRight; 2667 | animation-name: zoomInRight; 2668 | } 2669 | 2670 | @-webkit-keyframes zoomInUp { 2671 | 0% { 2672 | opacity: 0; 2673 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2674 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2675 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2676 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2677 | } 2678 | 2679 | 60% { 2680 | opacity: 1; 2681 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2682 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2683 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2684 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2685 | } 2686 | } 2687 | 2688 | @keyframes zoomInUp { 2689 | 0% { 2690 | opacity: 0; 2691 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2692 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2693 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2694 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2695 | } 2696 | 2697 | 60% { 2698 | opacity: 1; 2699 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2700 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2701 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2702 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2703 | } 2704 | } 2705 | 2706 | .zoomInUp { 2707 | -webkit-animation-name: zoomInUp; 2708 | animation-name: zoomInUp; 2709 | } 2710 | 2711 | @-webkit-keyframes zoomOut { 2712 | 0% { 2713 | opacity: 1; 2714 | } 2715 | 2716 | 50% { 2717 | opacity: 0; 2718 | -webkit-transform: scale3d(.3, .3, .3); 2719 | transform: scale3d(.3, .3, .3); 2720 | } 2721 | 2722 | 100% { 2723 | opacity: 0; 2724 | } 2725 | } 2726 | 2727 | @keyframes zoomOut { 2728 | 0% { 2729 | opacity: 1; 2730 | } 2731 | 2732 | 50% { 2733 | opacity: 0; 2734 | -webkit-transform: scale3d(.3, .3, .3); 2735 | transform: scale3d(.3, .3, .3); 2736 | } 2737 | 2738 | 100% { 2739 | opacity: 0; 2740 | } 2741 | } 2742 | 2743 | .zoomOut { 2744 | -webkit-animation-name: zoomOut; 2745 | animation-name: zoomOut; 2746 | } 2747 | 2748 | @-webkit-keyframes zoomOutDown { 2749 | 40% { 2750 | opacity: 1; 2751 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2752 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2753 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2754 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2755 | } 2756 | 2757 | 100% { 2758 | opacity: 0; 2759 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2760 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2761 | -webkit-transform-origin: center bottom; 2762 | transform-origin: center bottom; 2763 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2764 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2765 | } 2766 | } 2767 | 2768 | @keyframes zoomOutDown { 2769 | 40% { 2770 | opacity: 1; 2771 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2772 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2773 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2774 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2775 | } 2776 | 2777 | 100% { 2778 | opacity: 0; 2779 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2780 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2781 | -webkit-transform-origin: center bottom; 2782 | transform-origin: center bottom; 2783 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2785 | } 2786 | } 2787 | 2788 | .zoomOutDown { 2789 | -webkit-animation-name: zoomOutDown; 2790 | animation-name: zoomOutDown; 2791 | } 2792 | 2793 | @-webkit-keyframes zoomOutLeft { 2794 | 40% { 2795 | opacity: 1; 2796 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2797 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2798 | } 2799 | 2800 | 100% { 2801 | opacity: 0; 2802 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2803 | transform: scale(.1) translate3d(-2000px, 0, 0); 2804 | -webkit-transform-origin: left center; 2805 | transform-origin: left center; 2806 | } 2807 | } 2808 | 2809 | @keyframes zoomOutLeft { 2810 | 40% { 2811 | opacity: 1; 2812 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2813 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2814 | } 2815 | 2816 | 100% { 2817 | opacity: 0; 2818 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2819 | transform: scale(.1) translate3d(-2000px, 0, 0); 2820 | -webkit-transform-origin: left center; 2821 | transform-origin: left center; 2822 | } 2823 | } 2824 | 2825 | .zoomOutLeft { 2826 | -webkit-animation-name: zoomOutLeft; 2827 | animation-name: zoomOutLeft; 2828 | } 2829 | 2830 | @-webkit-keyframes zoomOutRight { 2831 | 40% { 2832 | opacity: 1; 2833 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2834 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2835 | } 2836 | 2837 | 100% { 2838 | opacity: 0; 2839 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2840 | transform: scale(.1) translate3d(2000px, 0, 0); 2841 | -webkit-transform-origin: right center; 2842 | transform-origin: right center; 2843 | } 2844 | } 2845 | 2846 | @keyframes zoomOutRight { 2847 | 40% { 2848 | opacity: 1; 2849 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2850 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2851 | } 2852 | 2853 | 100% { 2854 | opacity: 0; 2855 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2856 | transform: scale(.1) translate3d(2000px, 0, 0); 2857 | -webkit-transform-origin: right center; 2858 | transform-origin: right center; 2859 | } 2860 | } 2861 | 2862 | .zoomOutRight { 2863 | -webkit-animation-name: zoomOutRight; 2864 | animation-name: zoomOutRight; 2865 | } 2866 | 2867 | @-webkit-keyframes zoomOutUp { 2868 | 40% { 2869 | opacity: 1; 2870 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2871 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2872 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2873 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2874 | } 2875 | 2876 | 100% { 2877 | opacity: 0; 2878 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2879 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2880 | -webkit-transform-origin: center bottom; 2881 | transform-origin: center bottom; 2882 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2883 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2884 | } 2885 | } 2886 | 2887 | @keyframes zoomOutUp { 2888 | 40% { 2889 | opacity: 1; 2890 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2891 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2892 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2893 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2894 | } 2895 | 2896 | 100% { 2897 | opacity: 0; 2898 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2899 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2900 | -webkit-transform-origin: center bottom; 2901 | transform-origin: center bottom; 2902 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2903 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2904 | } 2905 | } 2906 | 2907 | .zoomOutUp { 2908 | -webkit-animation-name: zoomOutUp; 2909 | animation-name: zoomOutUp; 2910 | } 2911 | 2912 | @-webkit-keyframes slideInDown { 2913 | 0% { 2914 | -webkit-transform: translateY(-100%); 2915 | transform: translateY(-100%); 2916 | visibility: visible; 2917 | } 2918 | 2919 | 100% { 2920 | -webkit-transform: translateY(0); 2921 | transform: translateY(0); 2922 | } 2923 | } 2924 | 2925 | @keyframes slideInDown { 2926 | 0% { 2927 | -webkit-transform: translateY(-100%); 2928 | transform: translateY(-100%); 2929 | visibility: visible; 2930 | } 2931 | 2932 | 100% { 2933 | -webkit-transform: translateY(0); 2934 | transform: translateY(0); 2935 | } 2936 | } 2937 | 2938 | .slideInDown { 2939 | -webkit-animation-name: slideInDown; 2940 | animation-name: slideInDown; 2941 | } 2942 | 2943 | @-webkit-keyframes slideInLeft { 2944 | 0% { 2945 | -webkit-transform: translateX(-100%); 2946 | transform: translateX(-100%); 2947 | visibility: visible; 2948 | } 2949 | 2950 | 100% { 2951 | -webkit-transform: translateX(0); 2952 | transform: translateX(0); 2953 | } 2954 | } 2955 | 2956 | @keyframes slideInLeft { 2957 | 0% { 2958 | -webkit-transform: translateX(-100%); 2959 | transform: translateX(-100%); 2960 | visibility: visible; 2961 | } 2962 | 2963 | 100% { 2964 | -webkit-transform: translateX(0); 2965 | transform: translateX(0); 2966 | } 2967 | } 2968 | 2969 | .slideInLeft { 2970 | -webkit-animation-name: slideInLeft; 2971 | animation-name: slideInLeft; 2972 | } 2973 | 2974 | @-webkit-keyframes slideInRight { 2975 | 0% { 2976 | -webkit-transform: translateX(100%); 2977 | transform: translateX(100%); 2978 | visibility: visible; 2979 | } 2980 | 2981 | 100% { 2982 | -webkit-transform: translateX(0); 2983 | transform: translateX(0); 2984 | } 2985 | } 2986 | 2987 | @keyframes slideInRight { 2988 | 0% { 2989 | -webkit-transform: translateX(100%); 2990 | transform: translateX(100%); 2991 | visibility: visible; 2992 | } 2993 | 2994 | 100% { 2995 | -webkit-transform: translateX(0); 2996 | transform: translateX(0); 2997 | } 2998 | } 2999 | 3000 | .slideInRight { 3001 | -webkit-animation-name: slideInRight; 3002 | animation-name: slideInRight; 3003 | } 3004 | 3005 | @-webkit-keyframes slideInUp { 3006 | 0% { 3007 | -webkit-transform: translateY(100%); 3008 | transform: translateY(100%); 3009 | visibility: visible; 3010 | } 3011 | 3012 | 100% { 3013 | -webkit-transform: translateY(0); 3014 | transform: translateY(0); 3015 | } 3016 | } 3017 | 3018 | @keyframes slideInUp { 3019 | 0% { 3020 | -webkit-transform: translateY(100%); 3021 | transform: translateY(100%); 3022 | visibility: visible; 3023 | } 3024 | 3025 | 100% { 3026 | -webkit-transform: translateY(0); 3027 | transform: translateY(0); 3028 | } 3029 | } 3030 | 3031 | .slideInUp { 3032 | -webkit-animation-name: slideInUp; 3033 | animation-name: slideInUp; 3034 | } 3035 | 3036 | @-webkit-keyframes slideOutDown { 3037 | 0% { 3038 | -webkit-transform: translateY(0); 3039 | transform: translateY(0); 3040 | } 3041 | 3042 | 100% { 3043 | visibility: hidden; 3044 | -webkit-transform: translateY(100%); 3045 | transform: translateY(100%); 3046 | } 3047 | } 3048 | 3049 | @keyframes slideOutDown { 3050 | 0% { 3051 | -webkit-transform: translateY(0); 3052 | transform: translateY(0); 3053 | } 3054 | 3055 | 100% { 3056 | visibility: hidden; 3057 | -webkit-transform: translateY(100%); 3058 | transform: translateY(100%); 3059 | } 3060 | } 3061 | 3062 | .slideOutDown { 3063 | -webkit-animation-name: slideOutDown; 3064 | animation-name: slideOutDown; 3065 | } 3066 | 3067 | @-webkit-keyframes slideOutLeft { 3068 | 0% { 3069 | -webkit-transform: translateX(0); 3070 | transform: translateX(0); 3071 | } 3072 | 3073 | 100% { 3074 | visibility: hidden; 3075 | -webkit-transform: translateX(-100%); 3076 | transform: translateX(-100%); 3077 | } 3078 | } 3079 | 3080 | @keyframes slideOutLeft { 3081 | 0% { 3082 | -webkit-transform: translateX(0); 3083 | transform: translateX(0); 3084 | } 3085 | 3086 | 100% { 3087 | visibility: hidden; 3088 | -webkit-transform: translateX(-100%); 3089 | transform: translateX(-100%); 3090 | } 3091 | } 3092 | 3093 | .slideOutLeft { 3094 | -webkit-animation-name: slideOutLeft; 3095 | animation-name: slideOutLeft; 3096 | } 3097 | 3098 | @-webkit-keyframes slideOutRight { 3099 | 0% { 3100 | -webkit-transform: translateX(0); 3101 | transform: translateX(0); 3102 | } 3103 | 3104 | 100% { 3105 | visibility: hidden; 3106 | -webkit-transform: translateX(100%); 3107 | transform: translateX(100%); 3108 | } 3109 | } 3110 | 3111 | @keyframes slideOutRight { 3112 | 0% { 3113 | -webkit-transform: translateX(0); 3114 | transform: translateX(0); 3115 | } 3116 | 3117 | 100% { 3118 | visibility: hidden; 3119 | -webkit-transform: translateX(100%); 3120 | transform: translateX(100%); 3121 | } 3122 | } 3123 | 3124 | .slideOutRight { 3125 | -webkit-animation-name: slideOutRight; 3126 | animation-name: slideOutRight; 3127 | } 3128 | 3129 | @-webkit-keyframes slideOutUp { 3130 | 0% { 3131 | -webkit-transform: translateY(0); 3132 | transform: translateY(0); 3133 | } 3134 | 3135 | 100% { 3136 | visibility: hidden; 3137 | -webkit-transform: translateY(-100%); 3138 | transform: translateY(-100%); 3139 | } 3140 | } 3141 | 3142 | @keyframes slideOutUp { 3143 | 0% { 3144 | -webkit-transform: translateY(0); 3145 | transform: translateY(0); 3146 | } 3147 | 3148 | 100% { 3149 | visibility: hidden; 3150 | -webkit-transform: translateY(-100%); 3151 | transform: translateY(-100%); 3152 | } 3153 | } 3154 | 3155 | .slideOutUp { 3156 | -webkit-animation-name: slideOutUp; 3157 | animation-name: slideOutUp; 3158 | } 3159 | -------------------------------------------------------------------------------- /css/animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | Animate.css - http://daneden.me/animate 3 | Licensed under the MIT license - http://opensource.org/licenses/MIT 4 | 5 | Copyright (c) 2014 Daniel Eden 6 | */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} 7 | -------------------------------------------------------------------------------- /css/bootstrap-dropdownhover.css: -------------------------------------------------------------------------------- 1 | /* --------------------------------------------------------- */ 2 | /* 3 | * Dropdownhover v1.0.0 (http://bs-dropdownhover.kybarg.com) 4 | */ 5 | /* --------------------------------------------------------- */ 6 | 7 | /** 8 | * add animation for bootstrap "dropdown-menu" 9 | * 10 | * @see: 11 | * Animation duration: http://www.w3schools.com/cssref/css3_pr_animation-duration.asp 12 | * Animation timing: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp 13 | */ 14 | 15 | .dropdown > a { 16 | -webkit-transition: all 0.2s ease-in; 17 | -o-transition: all 0.2s ease-in; 18 | -moz-transition: all 0.2s ease-in; 19 | transition: all 0.2s ease-in; 20 | } 21 | 22 | .dropdown-menu.animated { 23 | -webkit-animation-duration: 0.3s; 24 | -moz-animation-duration: 0.3s; 25 | -o-animation-duration: 0.3s; 26 | animation-duration: 0.3s; 27 | -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);; 28 | -moz-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);; 29 | -o-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);; 30 | animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);; 31 | } 32 | .dropdown-menu.animated:before { 33 | content: " "; 34 | display: block; 35 | height: 100%; 36 | left: 0; 37 | position: absolute; 38 | top: 0; 39 | width: 100%; 40 | z-index: 99; 41 | } 42 | 43 | .dropdown-menu.animated.fadeIn { 44 | -webkit-animation-duration: 0.2s; 45 | -moz-animation-duration: 0.2s; 46 | -o-animation-duration: 0.2s; 47 | animation-duration: 0.2s; 48 | -webkit-animation-timing-function: ease-out; 49 | -moz-animation-timing-function: ease-out; 50 | -o-animation-timing-function: ease-out; 51 | animation-timing-function: ease-out; 52 | } 53 | 54 | .dropdownhover-bottom { 55 | -webkit-transform: translate3d(0, 0, 0); 56 | -moz-transform: translate3d(0, 0, 0); 57 | -ms-transform: translate3d(0, 0, 0); 58 | -o-transform: translate3d(0, 0, 0); 59 | transform: translate3d(0, 0, 0); 60 | /* <-- use the GPU for the rendering */ 61 | -webkit-transform-origin: 50% 0; 62 | -moz-transform-origin: 50% 0; 63 | -ms-transform-origin: 50% 0; 64 | -o-transform-origin: 50% 0; 65 | transform-origin: 50% 0; 66 | } 67 | 68 | .dropdownhover-left { 69 | -webkit-transform: translate3d(0, 0, 0); 70 | -moz-transform: translate3d(0, 0, 0); 71 | -ms-transform: translate3d(0, 0, 0); 72 | -o-transform: translate3d(0, 0, 0); 73 | transform: translate3d(0, 0, 0); 74 | /* <-- use the GPU for the rendering */ 75 | -webkit-transform-origin: 100% 50%; 76 | -moz-transform-origin: 100% 50%; 77 | -ms-transform-origin: 100% 50%; 78 | -o-transform-origin: 100% 50%; 79 | transform-origin: 100% 50%; 80 | } 81 | 82 | .dropdownhover-right { 83 | -webkit-transform: translate3d(0, 0, 0); 84 | -moz-transform: translate3d(0, 0, 0); 85 | -ms-transform: translate3d(0, 0, 0); 86 | -o-transform: translate3d(0, 0, 0); 87 | transform: translate3d(0, 0, 0); 88 | /* <-- use the GPU for the rendering */ 89 | -webkit-transform-origin: 0 50%; 90 | -moz-transform-origin: 0 50%; 91 | -ms-transform-origin: 0 50%; 92 | -o-transform-origin: 0 50%; 93 | transform-origin: 0 50%; 94 | } 95 | 96 | .dropdownhover-top { 97 | -webkit-transform: translate3d(0, 0, 0); 98 | -moz-transform: translate3d(0, 0, 0); 99 | -ms-transform: translate3d(0, 0, 0); 100 | -o-transform: translate3d(0, 0, 0); 101 | transform: translate3d(0, 0, 0); 102 | /* <-- use the GPU for the rendering */ 103 | -webkit-transform-origin: 50% 100%; 104 | -moz-transform-origin: 50% 100%; 105 | -ms-transform-origin: 50% 100%; 106 | -o-transform-origin: 50% 100%; 107 | transform-origin: 50% 100%; 108 | } 109 | 110 | -------------------------------------------------------------------------------- /css/bootstrap-dropdownhover.min.css: -------------------------------------------------------------------------------- 1 | .dropdown>a{-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;-moz-transition:all .2s ease-in;transition:all .2s ease-in}.dropdown-menu.animated{-webkit-animation-duration:.3s;-moz-animation-duration:.3s;-o-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);-moz-animation-timing-function:cubic-bezier(.4,0,.2,1);-o-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1)}.dropdown-menu.animated:before{content:" ";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:99}.dropdown-menu.animated.fadeIn{-webkit-animation-duration:.2s;-moz-animation-duration:.2s;-o-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out}.dropdownhover-bottom{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0}.dropdownhover-left{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}.dropdownhover-right{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;transform-origin:0 50%}.dropdownhover-top{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%} 2 | -------------------------------------------------------------------------------- /js/bootstrap-dropdownhover.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: dropdownhover.js v1.1.x 3 | * http://kybarg.github.io/bootstrap-dropdown-hover/ 4 | * ======================================================================== 5 | * Licensed under MIT (https://github.com/kybarg/bootstrap-dropdown-hover/blob/master/LICENSE) 6 | * ======================================================================== */ 7 | 8 | +function($) { 9 | 'use strict'; 10 | 11 | // DROPDOWN CLASS DEFINITION 12 | // ========================= 13 | 14 | var backdrop = '.dropdown-backdrop'; 15 | 16 | var Dropdownhover = function(element, options) { 17 | this.options = options; 18 | this.$element = $(element); 19 | 20 | var that = this; 21 | 22 | // defining if navigation tree or single dropdown 23 | if (this.$element.hasClass('dropdown-toggle')) { 24 | this.dropdowns = this.$element.parent().find('.dropdown-menu').parent('.dropdown'); 25 | } else { 26 | this.dropdowns = this.$element.find('.dropdown'); 27 | } 28 | 29 | // this.dropdowns contains all "li" elements which have a submenu 30 | 31 | // this.options contains a onClick property which contains that the actual browser fires touch events, but this isn't used 32 | 33 | this.dropdowns.each(function() { 34 | 35 | $(this).children('a, button').on('touchstart', function(e) { 36 | 37 | // console.log('Dropdownhover - options.onClick - touchstart'); 38 | 39 | $(this).attr('data-touchstart-event', 'true'); 40 | 41 | }).on('click', function(e) { 42 | 43 | // console.log('Dropdownhover - options.onClick - click', e); 44 | 45 | var touchstartEvent = $(this).attr('data-touchstart-event'); 46 | 47 | if (touchstartEvent === 'true') { 48 | 49 | var isActive = $(this).parent().hasClass('open'); 50 | var showMenu = $(this).attr('data-show-menu'); 51 | if (!isActive && showMenu !== 'true') { 52 | that.show($(this)); 53 | e.preventDefault(); 54 | 55 | // Hack: Stop immediate to disable all followed event handlers, to stop that bootstrap offcanvas 56 | // can interfer with the menu. This will also stop all further event handler. 57 | e.stopImmediatePropagation(); 58 | 59 | } else { 60 | var href = $(this).attr('href'); 61 | if (!href) { 62 | that.hide($(this)); 63 | } 64 | } 65 | 66 | // console.log('Dropdownhover - options.onClick - click - touched', e); 67 | } 68 | 69 | }); 70 | 71 | $(this).on('mouseenter.bs.dropdownhover', function(e) { 72 | 73 | // console.log('Dropdownhover - !options.onClick - mouseenter.bs.dropdownhover', e.target); 74 | 75 | that.show($(this).children('a, button')) 76 | 77 | }).on('mouseleave.bs.dropdownhover', function(e) { 78 | 79 | // console.log('Dropdownhover - !options.onClick - mouseleave.bs.dropdownhover', e.target); 80 | 81 | that.hide($(this).children('a, button')) 82 | 83 | }) 84 | }) 85 | 86 | }; 87 | 88 | Dropdownhover.TRANSITION_DURATION = 300; 89 | Dropdownhover.DELAY_SHOW = 250; 90 | Dropdownhover.DELAY_HIDE = 800; 91 | Dropdownhover.TIMEOUT_SHOW; 92 | Dropdownhover.TIMEOUT_HIDE; 93 | 94 | Dropdownhover.DEFAULTS = { 95 | onClick: false, 96 | animations: [ 97 | 'fadeInDown', 98 | 'fadeInRight', 99 | 'fadeInUp', 100 | 'fadeInLeft' 101 | ] 102 | }; 103 | 104 | /** 105 | * @param $this 106 | * 107 | * @returns {*} 108 | */ 109 | function getParent($this) { 110 | var selector = $this.attr('data-target'); 111 | 112 | if (!selector) { 113 | selector = $this.attr('href'); 114 | selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 115 | } 116 | 117 | var $parent = selector && $(document).find(selector); 118 | 119 | return $parent && $parent.length ? $parent : $this.parent() 120 | } 121 | 122 | /** 123 | * @param e 124 | */ 125 | function clearMenus(e) { 126 | if (e && e.which === 3) { 127 | return; 128 | } 129 | 130 | $(backdrop).remove(); 131 | $('[data-hover="dropdown"]').each(function() { 132 | var $this = $(this); 133 | var $parent = getParent($this); 134 | var relatedTarget = { relatedTarget: this }; 135 | 136 | if (!$parent.hasClass('open')) { 137 | return; 138 | } 139 | 140 | if ( 141 | e 142 | && 143 | e.type === 'click' 144 | && 145 | /input|textarea/i.test(e.target.tagName) 146 | && 147 | $.contains($parent[0], e.target) 148 | ) { 149 | return; 150 | } 151 | 152 | $parent.trigger(e = $.Event('hide.bs.dropdownhover', relatedTarget)); 153 | 154 | if (e.isDefaultPrevented()) { 155 | return; 156 | } 157 | 158 | $this.attr('aria-expanded', 'false'); 159 | $parent.removeClass('open').trigger($.Event('hidden.bs.dropdownhover', relatedTarget)) 160 | }) 161 | } 162 | 163 | /** 164 | * Opens dropdown menu when mouse is over the trigger element. 165 | * 166 | * @param _dropdownLink 167 | * 168 | * @returns {boolean} 169 | */ 170 | Dropdownhover.prototype.show = function(_dropdownLink) { 171 | 172 | var that = this; 173 | var $this = $(_dropdownLink); 174 | 175 | window.clearTimeout(Dropdownhover.TIMEOUT_HIDE); 176 | 177 | Dropdownhover.TIMEOUT_SHOW = window.setTimeout(function() { 178 | 179 | // close all dropdowns 180 | $('.dropdown').not($this.parents()).each(function() { 181 | $(this).removeClass('open') 182 | }); 183 | 184 | var effect = that.options.animations[0]; 185 | 186 | if ($this.is('.disabled, :disabled')) { 187 | return; 188 | } 189 | 190 | var $parent = $this.parent(); 191 | var isActive = $parent.hasClass('open'); 192 | 193 | if (!isActive) { 194 | 195 | if ('ontouchstart' in document.documentElement && $parent.closest('.navbar-nav').length > 0) { 196 | 197 | // if mobile we use a backdrop because click events don't delegate 198 | // 199 | // it will also be append to the dom multiple times, but if you click on the menu entry the site 200 | // will be reloaded or if you click outsite of the menu all dom elements will be removed 201 | $(document.createElement('div')) 202 | .addClass('dropdown-backdrop') 203 | .on('click', clearMenus) 204 | .appendTo('body'); 205 | } 206 | 207 | var $dropdown = $this.next('.dropdown-menu'); 208 | 209 | $parent.addClass('open'); 210 | $this.attr('aria-expanded', true); 211 | 212 | // Ensures that all menus that are closed have proper aria tagging. 213 | $parent.siblings().each(function() { 214 | if (!$(that).hasClass('open')) { 215 | $(that).find('[data-hover="dropdown"]').attr('aria-expanded', false); 216 | } 217 | }); 218 | 219 | var side = that.position($dropdown); 220 | 221 | switch (side) { 222 | case 'top': 223 | effect = that.options.animations[2]; 224 | break; 225 | case 'right': 226 | effect = that.options.animations[3]; 227 | break; 228 | case 'left': 229 | effect = that.options.animations[1]; 230 | break; 231 | default: 232 | effect = that.options.animations[0]; 233 | break; 234 | } 235 | 236 | $dropdown.addClass('animated ' + effect); 237 | 238 | var transition = $.support.transition && $dropdown.hasClass('animated'); 239 | 240 | transition ? 241 | $dropdown 242 | .one('bsTransitionEnd', function() { 243 | $dropdown.removeClass('animated ' + effect) 244 | }) 245 | .emulateTransitionEnd(Dropdownhover.TRANSITION_DURATION) : 246 | $dropdown.removeClass('animated ' + effect) 247 | } 248 | 249 | }, Dropdownhover.DELAY_SHOW); 250 | 251 | return false 252 | }; 253 | 254 | /** 255 | * Closes dropdown menu when mouse is out of it. 256 | * 257 | * @param _dropdownLink 258 | */ 259 | Dropdownhover.prototype.hide = function(_dropdownLink) { 260 | 261 | var $this = $(_dropdownLink); 262 | var $parent = $this.parent(); 263 | 264 | window.clearTimeout(Dropdownhover.TIMEOUT_SHOW); 265 | 266 | Dropdownhover.TIMEOUT_HIDE = window.setTimeout(function() { 267 | 268 | $parent.removeClass('open'); 269 | $this.attr('aria-expanded', false) 270 | 271 | }, Dropdownhover.DELAY_HIDE); 272 | }; 273 | 274 | /** 275 | * Calculating position of dropdown menu. 276 | * 277 | * @param dropdown 278 | * 279 | * @returns {string} 280 | */ 281 | Dropdownhover.prototype.position = function(dropdown) { 282 | 283 | var win = $(window); 284 | 285 | // reset css to prevent incorrect position 286 | dropdown.css({ 287 | bottom: '', 288 | left: '', 289 | top: '', 290 | right: '' 291 | }).removeClass('dropdownhover-top'); 292 | 293 | var viewport = { 294 | top: win.scrollTop(), 295 | left: win.scrollLeft() 296 | }; 297 | viewport.right = viewport.left + win.width(); 298 | viewport.bottom = viewport.top + win.height(); 299 | 300 | var bounds = dropdown.offset(); 301 | if (bounds === undefined) { 302 | // fallback hack 303 | side = 'right'; 304 | return side; 305 | } 306 | bounds.right = bounds.left + dropdown.outerWidth(); 307 | bounds.bottom = bounds.top + dropdown.outerHeight(); 308 | var position = dropdown.position(); 309 | position.right = bounds.left + dropdown.outerWidth(); 310 | position.bottom = bounds.top + dropdown.outerHeight(); 311 | 312 | var side = ''; 313 | 314 | var isSubnow = dropdown.parents('.dropdown-menu').length; 315 | 316 | if (isSubnow) { 317 | 318 | if (position.left < 0) { 319 | side = 'left'; 320 | dropdown.removeClass('dropdownhover-right').addClass('dropdownhover-left') 321 | } else { 322 | side = 'right'; 323 | dropdown.addClass('dropdownhover-right').removeClass('dropdownhover-left') 324 | } 325 | 326 | if (bounds.left < viewport.left) { 327 | side = 'right'; 328 | dropdown.css({ 329 | left: '100%', 330 | right: 'auto' 331 | }).addClass('dropdownhover-right').removeClass('dropdownhover-left') 332 | } else if (bounds.right > viewport.right) { 333 | side = 'left'; 334 | dropdown.css({ 335 | left: 'auto', 336 | right: '100%' 337 | }).removeClass('dropdownhover-right').addClass('dropdownhover-left') 338 | } 339 | 340 | if (bounds.bottom > viewport.bottom) { 341 | dropdown.css({ 342 | bottom: 'auto', 343 | top: -(bounds.bottom - viewport.bottom) 344 | }) 345 | } else if (bounds.top < viewport.top) { 346 | dropdown.css({ 347 | bottom: -(viewport.top - bounds.top), 348 | top: 'auto' 349 | }) 350 | } 351 | 352 | } else { // defines special position styles for root dropdown menu 353 | 354 | var parentLi = dropdown.parent('.dropdown'); 355 | var pBounds = parentLi.offset(); 356 | pBounds.right = pBounds.left + parentLi.outerWidth(); 357 | pBounds.bottom = pBounds.top + parentLi.outerHeight(); 358 | 359 | if (bounds.right > viewport.right) { 360 | var styleTmp = dropdown.attr('style'); 361 | // keep css if "auto !important" is used 362 | if ( 363 | styleTmp 364 | && 365 | ( 366 | styleTmp.indexOf('left: auto !important;') === -1 367 | && 368 | styleTmp.indexOf('right: auto !important;') === -1 369 | ) 370 | ) { 371 | dropdown.css({ 372 | left: -(bounds.right - viewport.right), 373 | right: 'auto' 374 | }); 375 | } 376 | } 377 | 378 | if ( 379 | bounds.bottom > viewport.bottom 380 | && 381 | (pBounds.top - viewport.top) > (viewport.bottom - pBounds.bottom) 382 | || 383 | dropdown.position().top < 0 384 | ) { 385 | side = 'top'; 386 | dropdown.css({ 387 | bottom: '100%', 388 | top: 'auto' 389 | }).addClass('dropdownhover-top').removeClass('dropdownhover-bottom') 390 | } else { 391 | side = 'bottom'; 392 | dropdown.addClass('dropdownhover-bottom') 393 | } 394 | } 395 | 396 | return side; 397 | 398 | }; 399 | 400 | 401 | // DROPDOWNHOVER PLUGIN DEFINITION 402 | // ========================== 403 | 404 | /** 405 | * @param option 406 | * 407 | * @returns {*} 408 | * 409 | * @constructor 410 | */ 411 | function Plugin(option) { 412 | return this.each(function() { 413 | var $this = $(this); 414 | var data = $this.data('bs.dropdownhover'); 415 | var settings = $this.data(); 416 | 417 | if ($this.data('animations') !== undefined && $this.data('animations') !== null) { 418 | settings.animations = $.isArray(settings.animations) ? settings.animations : settings.animations.split(' '); 419 | } 420 | 421 | var options = $.extend({}, Dropdownhover.DEFAULTS, settings, typeof option == 'object' && option); 422 | 423 | if (!data) { 424 | $this.data('bs.dropdownhover', (data = new Dropdownhover(this, options))); 425 | } 426 | 427 | }) 428 | } 429 | 430 | var old = $.fn.dropdownhover; 431 | 432 | $.fn.dropdownhover = Plugin; 433 | $.fn.dropdownhover.Constructor = Dropdownhover; 434 | 435 | // DROPDOWNHOVER NO CONFLICT 436 | // ==================== 437 | $.fn.dropdownhover.noConflict = function() { 438 | $.fn.dropdownhover = old; 439 | return this 440 | }; 441 | 442 | // APPLY TO STANDARD DROPDOWNHOVER ELEMENTS 443 | // =================================== 444 | $(document).ready(function() { 445 | $('[data-hover="dropdown"]').each(function() { 446 | var $target = $(this); 447 | if ('ontouchstart' in document.documentElement) { 448 | Plugin.call($target, $.extend({}, $target.data(), { onClick: true })) 449 | } else { 450 | Plugin.call($target, $target.data()) 451 | } 452 | }) 453 | }) 454 | 455 | }(jQuery); 456 | -------------------------------------------------------------------------------- /js/bootstrap-dropdownhover.min.js: -------------------------------------------------------------------------------- 1 | !function(t){"use strict";var o=function(o,e){this.options=e,this.$element=t(o);var n=this;this.$element.hasClass("dropdown-toggle")?this.dropdowns=this.$element.parent().find(".dropdown-menu").parent(".dropdown"):this.dropdowns=this.$element.find(".dropdown"),this.dropdowns.each((function(){t(this).children("a, button").on("touchstart",(function(o){t(this).attr("data-touchstart-event","true")})).on("click",(function(o){if("true"===t(this).attr("data-touchstart-event")){var e=t(this).parent().hasClass("open"),a=t(this).attr("data-show-menu");if(e||"true"===a)t(this).attr("href")||n.hide(t(this));else n.show(t(this)),o.preventDefault(),o.stopImmediatePropagation()}})),t(this).on("mouseenter.bs.dropdownhover",(function(o){n.show(t(this).children("a, button"))})).on("mouseleave.bs.dropdownhover",(function(o){n.hide(t(this).children("a, button"))}))}))};function e(o){o&&3===o.which||(t(".dropdown-backdrop").remove(),t('[data-hover="dropdown"]').each((function(){var e=t(this),n=function(o){var e=o.attr("data-target");e||(e=(e=o.attr("href"))&&/#[A-Za-z]/.test(e)&&e.replace(/.*(?=#[^\s]*$)/,""));var n=e&&t(document).find(e);return n&&n.length?n:o.parent()}(e),a={relatedTarget:this};n.hasClass("open")&&(o&&"click"===o.type&&/input|textarea/i.test(o.target.tagName)&&t.contains(n[0],o.target)||(n.trigger(o=t.Event("hide.bs.dropdownhover",a)),o.isDefaultPrevented()||(e.attr("aria-expanded","false"),n.removeClass("open").trigger(t.Event("hidden.bs.dropdownhover",a)))))})))}function n(e){return this.each((function(){var n=t(this),a=n.data("bs.dropdownhover"),r=n.data();void 0!==n.data("animations")&&null!==n.data("animations")&&(r.animations=t.isArray(r.animations)?r.animations:r.animations.split(" "));var i=t.extend({},o.DEFAULTS,r,"object"==typeof e&&e);a||n.data("bs.dropdownhover",a=new o(this,i))}))}o.TRANSITION_DURATION=300,o.DELAY_SHOW=250,o.DELAY_HIDE=800,o.DEFAULTS={onClick:!1,animations:["fadeInDown","fadeInRight","fadeInUp","fadeInLeft"]},o.prototype.show=function(n){var a=this,r=t(n);return window.clearTimeout(o.TIMEOUT_HIDE),o.TIMEOUT_SHOW=window.setTimeout((function(){t(".dropdown").not(r.parents()).each((function(){t(this).removeClass("open")}));var n=a.options.animations[0];if(!r.is(".disabled, :disabled")){var i=r.parent();if(!i.hasClass("open")){"ontouchstart"in document.documentElement&&i.closest(".navbar-nav").length>0&&t(document.createElement("div")).addClass("dropdown-backdrop").on("click",e).appendTo("body");var s=r.next(".dropdown-menu");switch(i.addClass("open"),r.attr("aria-expanded",!0),i.siblings().each((function(){t(a).hasClass("open")||t(a).find('[data-hover="dropdown"]').attr("aria-expanded",!1)})),a.position(s)){case"top":n=a.options.animations[2];break;case"right":n=a.options.animations[3];break;case"left":n=a.options.animations[1];break;default:n=a.options.animations[0]}s.addClass("animated "+n),t.support.transition&&s.hasClass("animated")?s.one("bsTransitionEnd",(function(){s.removeClass("animated "+n)})).emulateTransitionEnd(o.TRANSITION_DURATION):s.removeClass("animated "+n)}}}),o.DELAY_SHOW),!1},o.prototype.hide=function(e){var n=t(e),a=n.parent();window.clearTimeout(o.TIMEOUT_SHOW),o.TIMEOUT_HIDE=window.setTimeout((function(){a.removeClass("open"),n.attr("aria-expanded",!1)}),o.DELAY_HIDE)},o.prototype.position=function(o){var e=t(window);o.css({bottom:"",left:"",top:"",right:""}).removeClass("dropdownhover-top");var n={top:e.scrollTop(),left:e.scrollLeft()};n.right=n.left+e.width(),n.bottom=n.top+e.height();var a=o.offset();if(void 0===a)return i="right";a.right=a.left+o.outerWidth(),a.bottom=a.top+o.outerHeight();var r=o.position();r.right=a.left+o.outerWidth(),r.bottom=a.top+o.outerHeight();var i="";if(o.parents(".dropdown-menu").length)r.left<0?(i="left",o.removeClass("dropdownhover-right").addClass("dropdownhover-left")):(i="right",o.addClass("dropdownhover-right").removeClass("dropdownhover-left")),a.leftn.right&&(i="left",o.css({left:"auto",right:"100%"}).removeClass("dropdownhover-right").addClass("dropdownhover-left")),a.bottom>n.bottom?o.css({bottom:"auto",top:-(a.bottom-n.bottom)}):a.topn.right){var h=o.attr("style");h&&-1===h.indexOf("left: auto !important;")&&-1===h.indexOf("right: auto !important;")&&o.css({left:-(a.right-n.right),right:"auto"})}a.bottom>n.bottom&&d.top-n.top>n.bottom-d.bottom||o.position().top<0?(i="top",o.css({bottom:"100%",top:"auto"}).addClass("dropdownhover-top").removeClass("dropdownhover-bottom")):(i="bottom",o.addClass("dropdownhover-bottom"))}return i};var a=t.fn.dropdownhover;t.fn.dropdownhover=n,t.fn.dropdownhover.Constructor=o,t.fn.dropdownhover.noConflict=function(){return t.fn.dropdownhover=a,this},t(document).ready((function(){t('[data-hover="dropdown"]').each((function(){var o=t(this);"ontouchstart"in document.documentElement?n.call(o,t.extend({},o.data(),{onClick:!0})):n.call(o,o.data())}))}))}(jQuery); 2 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kybarg/bootstrap-dropdown-hover", 3 | "version": "1.2.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "buffer-from": { 8 | "version": "1.1.1", 9 | "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", 10 | "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", 11 | "dev": true 12 | }, 13 | "camel-case": { 14 | "version": "3.0.0", 15 | "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", 16 | "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", 17 | "dev": true, 18 | "requires": { 19 | "no-case": "^2.2.0", 20 | "upper-case": "^1.1.1" 21 | } 22 | }, 23 | "clean-css": { 24 | "version": "4.2.3", 25 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", 26 | "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==", 27 | "dev": true, 28 | "requires": { 29 | "source-map": "~0.6.0" 30 | } 31 | }, 32 | "commander": { 33 | "version": "2.20.3", 34 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", 35 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", 36 | "dev": true 37 | }, 38 | "css-b64-images": { 39 | "version": "0.2.5", 40 | "resolved": "https://registry.npmjs.org/css-b64-images/-/css-b64-images-0.2.5.tgz", 41 | "integrity": "sha1-QgBdgyBLK0pdk7axpWRBM7WSegI=", 42 | "dev": true 43 | }, 44 | "debug": { 45 | "version": "4.1.1", 46 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 47 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 48 | "dev": true, 49 | "requires": { 50 | "ms": "^2.1.1" 51 | } 52 | }, 53 | "he": { 54 | "version": "1.2.0", 55 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 56 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", 57 | "dev": true 58 | }, 59 | "html-minifier": { 60 | "version": "4.0.0", 61 | "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz", 62 | "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==", 63 | "dev": true, 64 | "requires": { 65 | "camel-case": "^3.0.0", 66 | "clean-css": "^4.2.1", 67 | "commander": "^2.19.0", 68 | "he": "^1.2.0", 69 | "param-case": "^2.1.1", 70 | "relateurl": "^0.2.7", 71 | "uglify-js": "^3.5.1" 72 | } 73 | }, 74 | "lower-case": { 75 | "version": "1.1.4", 76 | "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", 77 | "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", 78 | "dev": true 79 | }, 80 | "minify": { 81 | "version": "5.1.1", 82 | "resolved": "https://registry.npmjs.org/minify/-/minify-5.1.1.tgz", 83 | "integrity": "sha512-1aAsFXuW+CpkqzHe1sQpJuPDMuX3o13laF1hs0rH0BhQTRwvYDuzrYgB5qXqR/8WafaqK3+oHQVaaSHHMFw3Pg==", 84 | "dev": true, 85 | "requires": { 86 | "clean-css": "^4.1.6", 87 | "css-b64-images": "~0.2.5", 88 | "debug": "^4.1.0", 89 | "html-minifier": "^4.0.0", 90 | "terser": "^4.0.0", 91 | "try-catch": "^3.0.0", 92 | "try-to-catch": "^3.0.0" 93 | } 94 | }, 95 | "ms": { 96 | "version": "2.1.2", 97 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 98 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", 99 | "dev": true 100 | }, 101 | "no-case": { 102 | "version": "2.3.2", 103 | "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", 104 | "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", 105 | "dev": true, 106 | "requires": { 107 | "lower-case": "^1.1.1" 108 | } 109 | }, 110 | "param-case": { 111 | "version": "2.1.1", 112 | "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", 113 | "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", 114 | "dev": true, 115 | "requires": { 116 | "no-case": "^2.2.0" 117 | } 118 | }, 119 | "relateurl": { 120 | "version": "0.2.7", 121 | "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", 122 | "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", 123 | "dev": true 124 | }, 125 | "source-map": { 126 | "version": "0.6.1", 127 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 128 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 129 | "dev": true 130 | }, 131 | "source-map-support": { 132 | "version": "0.5.19", 133 | "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", 134 | "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", 135 | "dev": true, 136 | "requires": { 137 | "buffer-from": "^1.0.0", 138 | "source-map": "^0.6.0" 139 | } 140 | }, 141 | "terser": { 142 | "version": "4.8.0", 143 | "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", 144 | "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==", 145 | "dev": true, 146 | "requires": { 147 | "commander": "^2.20.0", 148 | "source-map": "~0.6.1", 149 | "source-map-support": "~0.5.12" 150 | } 151 | }, 152 | "try-catch": { 153 | "version": "3.0.0", 154 | "resolved": "https://registry.npmjs.org/try-catch/-/try-catch-3.0.0.tgz", 155 | "integrity": "sha512-3uAqUnoemzca1ENvZ72EVimR+E8lqBbzwZ9v4CEbLjkaV3Q+FtdmPUt7jRtoSoTiYjyIMxEkf6YgUpe/voJ1ng==", 156 | "dev": true 157 | }, 158 | "try-to-catch": { 159 | "version": "3.0.0", 160 | "resolved": "https://registry.npmjs.org/try-to-catch/-/try-to-catch-3.0.0.tgz", 161 | "integrity": "sha512-eIm6ZXwR35jVF8By/HdbbkcaCDTBI5PpCPkejRKrYp0jyf/DbCCcRhHD7/O9jtFI3ewsqo9WctFEiJTS6i+CQA==", 162 | "dev": true 163 | }, 164 | "uglify-js": { 165 | "version": "3.10.4", 166 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.4.tgz", 167 | "integrity": "sha512-kBFT3U4Dcj4/pJ52vfjCSfyLyvG9VYYuGYPmrPvAxRw/i7xHiT4VvCev+uiEMcEEiu6UNB6KgWmGtSUYIWScbw==", 168 | "dev": true 169 | }, 170 | "upper-case": { 171 | "version": "1.1.3", 172 | "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", 173 | "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", 174 | "dev": true 175 | } 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@kybarg/bootstrap-dropdown-hover", 3 | "version": "1.2.0", 4 | "description": "Bootstrap based responsive mulltilevel dropdown navigation menu with fascinating animations", 5 | "main": "js/boootstrap-dropdownhover.js", 6 | "scripts": { 7 | "minify:css": "minify ./css/animate.css > ./css/animate.min.css && minify ./css/bootstrap-dropdownhover.css > ./css/bootstrap-dropdownhover.min.css", 8 | "minify:js": "minify ./js/bootstrap-dropdownhover.js > ./js/bootstrap-dropdownhover.min.js", 9 | "bundle": "npm run minify:js && npm run minify:css" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/kybarg/bootstrap-dropdown-hover.git" 14 | }, 15 | "keywords": [ 16 | "multilevel", 17 | "boostrap3" 18 | ], 19 | "author": "kybarg", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/kybarg/bootstrap-dropdown-hover/issues" 23 | }, 24 | "homepage": "https://github.com/kybarg/bootstrap-dropdown-hover#readme", 25 | "devDependencies": { 26 | "minify": "^5.1.1" 27 | } 28 | } 29 | --------------------------------------------------------------------------------