├── .gitignore ├── README.md ├── css ├── bootstrap-grid.css └── main.css ├── index.html └── script └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # range-html-css-js 2 | Range calculator 3 | [Demo](https://alvar91.github.io/range-html-css-js/) 4 | -------------------------------------------------------------------------------- /css/bootstrap-grid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v4.4.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | */ 7 | html { 8 | box-sizing: border-box; 9 | -ms-overflow-style: scrollbar; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: inherit; 16 | } 17 | 18 | .container { 19 | width: 100%; 20 | padding-right: 15px; 21 | padding-left: 15px; 22 | margin-right: auto; 23 | margin-left: auto; 24 | } 25 | 26 | @media (min-width: 576px) { 27 | .container { 28 | max-width: 540px; 29 | } 30 | } 31 | 32 | @media (min-width: 768px) { 33 | .container { 34 | max-width: 720px; 35 | } 36 | } 37 | 38 | @media (min-width: 992px) { 39 | .container { 40 | max-width: 960px; 41 | } 42 | } 43 | 44 | @media (min-width: 1200px) { 45 | .container { 46 | max-width: 1140px; 47 | } 48 | } 49 | 50 | .container-fluid, .container-sm, .container-md, .container-lg, .container-xl { 51 | width: 100%; 52 | padding-right: 15px; 53 | padding-left: 15px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | @media (min-width: 576px) { 59 | .container, .container-sm { 60 | max-width: 540px; 61 | } 62 | } 63 | 64 | @media (min-width: 768px) { 65 | .container, .container-sm, .container-md { 66 | max-width: 720px; 67 | } 68 | } 69 | 70 | @media (min-width: 992px) { 71 | .container, .container-sm, .container-md, .container-lg { 72 | max-width: 960px; 73 | } 74 | } 75 | 76 | @media (min-width: 1200px) { 77 | .container, .container-sm, .container-md, .container-lg, .container-xl { 78 | max-width: 1140px; 79 | } 80 | } 81 | 82 | .row { 83 | display: -ms-flexbox; 84 | display: flex; 85 | -ms-flex-wrap: wrap; 86 | flex-wrap: wrap; 87 | margin-right: -15px; 88 | margin-left: -15px; 89 | } 90 | 91 | .no-gutters { 92 | margin-right: 0; 93 | margin-left: 0; 94 | } 95 | 96 | .no-gutters > .col, 97 | .no-gutters > [class*="col-"] { 98 | padding-right: 0; 99 | padding-left: 0; 100 | } 101 | 102 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, 103 | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, 104 | .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, 105 | .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, 106 | .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, 107 | .col-xl-auto { 108 | position: relative; 109 | width: 100%; 110 | padding-right: 15px; 111 | padding-left: 15px; 112 | } 113 | 114 | .col { 115 | -ms-flex-preferred-size: 0; 116 | flex-basis: 0; 117 | -ms-flex-positive: 1; 118 | flex-grow: 1; 119 | max-width: 100%; 120 | } 121 | 122 | .row-cols-1 > * { 123 | -ms-flex: 0 0 100%; 124 | flex: 0 0 100%; 125 | max-width: 100%; 126 | } 127 | 128 | .row-cols-2 > * { 129 | -ms-flex: 0 0 50%; 130 | flex: 0 0 50%; 131 | max-width: 50%; 132 | } 133 | 134 | .row-cols-3 > * { 135 | -ms-flex: 0 0 33.333333%; 136 | flex: 0 0 33.333333%; 137 | max-width: 33.333333%; 138 | } 139 | 140 | .row-cols-4 > * { 141 | -ms-flex: 0 0 25%; 142 | flex: 0 0 25%; 143 | max-width: 25%; 144 | } 145 | 146 | .row-cols-5 > * { 147 | -ms-flex: 0 0 20%; 148 | flex: 0 0 20%; 149 | max-width: 20%; 150 | } 151 | 152 | .row-cols-6 > * { 153 | -ms-flex: 0 0 16.666667%; 154 | flex: 0 0 16.666667%; 155 | max-width: 16.666667%; 156 | } 157 | 158 | .col-auto { 159 | -ms-flex: 0 0 auto; 160 | flex: 0 0 auto; 161 | width: auto; 162 | max-width: 100%; 163 | } 164 | 165 | .col-1 { 166 | -ms-flex: 0 0 8.333333%; 167 | flex: 0 0 8.333333%; 168 | max-width: 8.333333%; 169 | } 170 | 171 | .col-2 { 172 | -ms-flex: 0 0 16.666667%; 173 | flex: 0 0 16.666667%; 174 | max-width: 16.666667%; 175 | } 176 | 177 | .col-3 { 178 | -ms-flex: 0 0 25%; 179 | flex: 0 0 25%; 180 | max-width: 25%; 181 | } 182 | 183 | .col-4 { 184 | -ms-flex: 0 0 33.333333%; 185 | flex: 0 0 33.333333%; 186 | max-width: 33.333333%; 187 | } 188 | 189 | .col-5 { 190 | -ms-flex: 0 0 41.666667%; 191 | flex: 0 0 41.666667%; 192 | max-width: 41.666667%; 193 | } 194 | 195 | .col-6 { 196 | -ms-flex: 0 0 50%; 197 | flex: 0 0 50%; 198 | max-width: 50%; 199 | } 200 | 201 | .col-7 { 202 | -ms-flex: 0 0 58.333333%; 203 | flex: 0 0 58.333333%; 204 | max-width: 58.333333%; 205 | } 206 | 207 | .col-8 { 208 | -ms-flex: 0 0 66.666667%; 209 | flex: 0 0 66.666667%; 210 | max-width: 66.666667%; 211 | } 212 | 213 | .col-9 { 214 | -ms-flex: 0 0 75%; 215 | flex: 0 0 75%; 216 | max-width: 75%; 217 | } 218 | 219 | .col-10 { 220 | -ms-flex: 0 0 83.333333%; 221 | flex: 0 0 83.333333%; 222 | max-width: 83.333333%; 223 | } 224 | 225 | .col-11 { 226 | -ms-flex: 0 0 91.666667%; 227 | flex: 0 0 91.666667%; 228 | max-width: 91.666667%; 229 | } 230 | 231 | .col-12 { 232 | -ms-flex: 0 0 100%; 233 | flex: 0 0 100%; 234 | max-width: 100%; 235 | } 236 | 237 | .order-first { 238 | -ms-flex-order: -1; 239 | order: -1; 240 | } 241 | 242 | .order-last { 243 | -ms-flex-order: 13; 244 | order: 13; 245 | } 246 | 247 | .order-0 { 248 | -ms-flex-order: 0; 249 | order: 0; 250 | } 251 | 252 | .order-1 { 253 | -ms-flex-order: 1; 254 | order: 1; 255 | } 256 | 257 | .order-2 { 258 | -ms-flex-order: 2; 259 | order: 2; 260 | } 261 | 262 | .order-3 { 263 | -ms-flex-order: 3; 264 | order: 3; 265 | } 266 | 267 | .order-4 { 268 | -ms-flex-order: 4; 269 | order: 4; 270 | } 271 | 272 | .order-5 { 273 | -ms-flex-order: 5; 274 | order: 5; 275 | } 276 | 277 | .order-6 { 278 | -ms-flex-order: 6; 279 | order: 6; 280 | } 281 | 282 | .order-7 { 283 | -ms-flex-order: 7; 284 | order: 7; 285 | } 286 | 287 | .order-8 { 288 | -ms-flex-order: 8; 289 | order: 8; 290 | } 291 | 292 | .order-9 { 293 | -ms-flex-order: 9; 294 | order: 9; 295 | } 296 | 297 | .order-10 { 298 | -ms-flex-order: 10; 299 | order: 10; 300 | } 301 | 302 | .order-11 { 303 | -ms-flex-order: 11; 304 | order: 11; 305 | } 306 | 307 | .order-12 { 308 | -ms-flex-order: 12; 309 | order: 12; 310 | } 311 | 312 | .offset-1 { 313 | margin-left: 8.333333%; 314 | } 315 | 316 | .offset-2 { 317 | margin-left: 16.666667%; 318 | } 319 | 320 | .offset-3 { 321 | margin-left: 25%; 322 | } 323 | 324 | .offset-4 { 325 | margin-left: 33.333333%; 326 | } 327 | 328 | .offset-5 { 329 | margin-left: 41.666667%; 330 | } 331 | 332 | .offset-6 { 333 | margin-left: 50%; 334 | } 335 | 336 | .offset-7 { 337 | margin-left: 58.333333%; 338 | } 339 | 340 | .offset-8 { 341 | margin-left: 66.666667%; 342 | } 343 | 344 | .offset-9 { 345 | margin-left: 75%; 346 | } 347 | 348 | .offset-10 { 349 | margin-left: 83.333333%; 350 | } 351 | 352 | .offset-11 { 353 | margin-left: 91.666667%; 354 | } 355 | 356 | @media (min-width: 576px) { 357 | .col-sm { 358 | -ms-flex-preferred-size: 0; 359 | flex-basis: 0; 360 | -ms-flex-positive: 1; 361 | flex-grow: 1; 362 | max-width: 100%; 363 | } 364 | .row-cols-sm-1 > * { 365 | -ms-flex: 0 0 100%; 366 | flex: 0 0 100%; 367 | max-width: 100%; 368 | } 369 | .row-cols-sm-2 > * { 370 | -ms-flex: 0 0 50%; 371 | flex: 0 0 50%; 372 | max-width: 50%; 373 | } 374 | .row-cols-sm-3 > * { 375 | -ms-flex: 0 0 33.333333%; 376 | flex: 0 0 33.333333%; 377 | max-width: 33.333333%; 378 | } 379 | .row-cols-sm-4 > * { 380 | -ms-flex: 0 0 25%; 381 | flex: 0 0 25%; 382 | max-width: 25%; 383 | } 384 | .row-cols-sm-5 > * { 385 | -ms-flex: 0 0 20%; 386 | flex: 0 0 20%; 387 | max-width: 20%; 388 | } 389 | .row-cols-sm-6 > * { 390 | -ms-flex: 0 0 16.666667%; 391 | flex: 0 0 16.666667%; 392 | max-width: 16.666667%; 393 | } 394 | .col-sm-auto { 395 | -ms-flex: 0 0 auto; 396 | flex: 0 0 auto; 397 | width: auto; 398 | max-width: 100%; 399 | } 400 | .col-sm-1 { 401 | -ms-flex: 0 0 8.333333%; 402 | flex: 0 0 8.333333%; 403 | max-width: 8.333333%; 404 | } 405 | .col-sm-2 { 406 | -ms-flex: 0 0 16.666667%; 407 | flex: 0 0 16.666667%; 408 | max-width: 16.666667%; 409 | } 410 | .col-sm-3 { 411 | -ms-flex: 0 0 25%; 412 | flex: 0 0 25%; 413 | max-width: 25%; 414 | } 415 | .col-sm-4 { 416 | -ms-flex: 0 0 33.333333%; 417 | flex: 0 0 33.333333%; 418 | max-width: 33.333333%; 419 | } 420 | .col-sm-5 { 421 | -ms-flex: 0 0 41.666667%; 422 | flex: 0 0 41.666667%; 423 | max-width: 41.666667%; 424 | } 425 | .col-sm-6 { 426 | -ms-flex: 0 0 50%; 427 | flex: 0 0 50%; 428 | max-width: 50%; 429 | } 430 | .col-sm-7 { 431 | -ms-flex: 0 0 58.333333%; 432 | flex: 0 0 58.333333%; 433 | max-width: 58.333333%; 434 | } 435 | .col-sm-8 { 436 | -ms-flex: 0 0 66.666667%; 437 | flex: 0 0 66.666667%; 438 | max-width: 66.666667%; 439 | } 440 | .col-sm-9 { 441 | -ms-flex: 0 0 75%; 442 | flex: 0 0 75%; 443 | max-width: 75%; 444 | } 445 | .col-sm-10 { 446 | -ms-flex: 0 0 83.333333%; 447 | flex: 0 0 83.333333%; 448 | max-width: 83.333333%; 449 | } 450 | .col-sm-11 { 451 | -ms-flex: 0 0 91.666667%; 452 | flex: 0 0 91.666667%; 453 | max-width: 91.666667%; 454 | } 455 | .col-sm-12 { 456 | -ms-flex: 0 0 100%; 457 | flex: 0 0 100%; 458 | max-width: 100%; 459 | } 460 | .order-sm-first { 461 | -ms-flex-order: -1; 462 | order: -1; 463 | } 464 | .order-sm-last { 465 | -ms-flex-order: 13; 466 | order: 13; 467 | } 468 | .order-sm-0 { 469 | -ms-flex-order: 0; 470 | order: 0; 471 | } 472 | .order-sm-1 { 473 | -ms-flex-order: 1; 474 | order: 1; 475 | } 476 | .order-sm-2 { 477 | -ms-flex-order: 2; 478 | order: 2; 479 | } 480 | .order-sm-3 { 481 | -ms-flex-order: 3; 482 | order: 3; 483 | } 484 | .order-sm-4 { 485 | -ms-flex-order: 4; 486 | order: 4; 487 | } 488 | .order-sm-5 { 489 | -ms-flex-order: 5; 490 | order: 5; 491 | } 492 | .order-sm-6 { 493 | -ms-flex-order: 6; 494 | order: 6; 495 | } 496 | .order-sm-7 { 497 | -ms-flex-order: 7; 498 | order: 7; 499 | } 500 | .order-sm-8 { 501 | -ms-flex-order: 8; 502 | order: 8; 503 | } 504 | .order-sm-9 { 505 | -ms-flex-order: 9; 506 | order: 9; 507 | } 508 | .order-sm-10 { 509 | -ms-flex-order: 10; 510 | order: 10; 511 | } 512 | .order-sm-11 { 513 | -ms-flex-order: 11; 514 | order: 11; 515 | } 516 | .order-sm-12 { 517 | -ms-flex-order: 12; 518 | order: 12; 519 | } 520 | .offset-sm-0 { 521 | margin-left: 0; 522 | } 523 | .offset-sm-1 { 524 | margin-left: 8.333333%; 525 | } 526 | .offset-sm-2 { 527 | margin-left: 16.666667%; 528 | } 529 | .offset-sm-3 { 530 | margin-left: 25%; 531 | } 532 | .offset-sm-4 { 533 | margin-left: 33.333333%; 534 | } 535 | .offset-sm-5 { 536 | margin-left: 41.666667%; 537 | } 538 | .offset-sm-6 { 539 | margin-left: 50%; 540 | } 541 | .offset-sm-7 { 542 | margin-left: 58.333333%; 543 | } 544 | .offset-sm-8 { 545 | margin-left: 66.666667%; 546 | } 547 | .offset-sm-9 { 548 | margin-left: 75%; 549 | } 550 | .offset-sm-10 { 551 | margin-left: 83.333333%; 552 | } 553 | .offset-sm-11 { 554 | margin-left: 91.666667%; 555 | } 556 | } 557 | 558 | @media (min-width: 768px) { 559 | .col-md { 560 | -ms-flex-preferred-size: 0; 561 | flex-basis: 0; 562 | -ms-flex-positive: 1; 563 | flex-grow: 1; 564 | max-width: 100%; 565 | } 566 | .row-cols-md-1 > * { 567 | -ms-flex: 0 0 100%; 568 | flex: 0 0 100%; 569 | max-width: 100%; 570 | } 571 | .row-cols-md-2 > * { 572 | -ms-flex: 0 0 50%; 573 | flex: 0 0 50%; 574 | max-width: 50%; 575 | } 576 | .row-cols-md-3 > * { 577 | -ms-flex: 0 0 33.333333%; 578 | flex: 0 0 33.333333%; 579 | max-width: 33.333333%; 580 | } 581 | .row-cols-md-4 > * { 582 | -ms-flex: 0 0 25%; 583 | flex: 0 0 25%; 584 | max-width: 25%; 585 | } 586 | .row-cols-md-5 > * { 587 | -ms-flex: 0 0 20%; 588 | flex: 0 0 20%; 589 | max-width: 20%; 590 | } 591 | .row-cols-md-6 > * { 592 | -ms-flex: 0 0 16.666667%; 593 | flex: 0 0 16.666667%; 594 | max-width: 16.666667%; 595 | } 596 | .col-md-auto { 597 | -ms-flex: 0 0 auto; 598 | flex: 0 0 auto; 599 | width: auto; 600 | max-width: 100%; 601 | } 602 | .col-md-1 { 603 | -ms-flex: 0 0 8.333333%; 604 | flex: 0 0 8.333333%; 605 | max-width: 8.333333%; 606 | } 607 | .col-md-2 { 608 | -ms-flex: 0 0 16.666667%; 609 | flex: 0 0 16.666667%; 610 | max-width: 16.666667%; 611 | } 612 | .col-md-3 { 613 | -ms-flex: 0 0 25%; 614 | flex: 0 0 25%; 615 | max-width: 25%; 616 | } 617 | .col-md-4 { 618 | -ms-flex: 0 0 33.333333%; 619 | flex: 0 0 33.333333%; 620 | max-width: 33.333333%; 621 | } 622 | .col-md-5 { 623 | -ms-flex: 0 0 41.666667%; 624 | flex: 0 0 41.666667%; 625 | max-width: 41.666667%; 626 | } 627 | .col-md-6 { 628 | -ms-flex: 0 0 50%; 629 | flex: 0 0 50%; 630 | max-width: 50%; 631 | } 632 | .col-md-7 { 633 | -ms-flex: 0 0 58.333333%; 634 | flex: 0 0 58.333333%; 635 | max-width: 58.333333%; 636 | } 637 | .col-md-8 { 638 | -ms-flex: 0 0 66.666667%; 639 | flex: 0 0 66.666667%; 640 | max-width: 66.666667%; 641 | } 642 | .col-md-9 { 643 | -ms-flex: 0 0 75%; 644 | flex: 0 0 75%; 645 | max-width: 75%; 646 | } 647 | .col-md-10 { 648 | -ms-flex: 0 0 83.333333%; 649 | flex: 0 0 83.333333%; 650 | max-width: 83.333333%; 651 | } 652 | .col-md-11 { 653 | -ms-flex: 0 0 91.666667%; 654 | flex: 0 0 91.666667%; 655 | max-width: 91.666667%; 656 | } 657 | .col-md-12 { 658 | -ms-flex: 0 0 100%; 659 | flex: 0 0 100%; 660 | max-width: 100%; 661 | } 662 | .order-md-first { 663 | -ms-flex-order: -1; 664 | order: -1; 665 | } 666 | .order-md-last { 667 | -ms-flex-order: 13; 668 | order: 13; 669 | } 670 | .order-md-0 { 671 | -ms-flex-order: 0; 672 | order: 0; 673 | } 674 | .order-md-1 { 675 | -ms-flex-order: 1; 676 | order: 1; 677 | } 678 | .order-md-2 { 679 | -ms-flex-order: 2; 680 | order: 2; 681 | } 682 | .order-md-3 { 683 | -ms-flex-order: 3; 684 | order: 3; 685 | } 686 | .order-md-4 { 687 | -ms-flex-order: 4; 688 | order: 4; 689 | } 690 | .order-md-5 { 691 | -ms-flex-order: 5; 692 | order: 5; 693 | } 694 | .order-md-6 { 695 | -ms-flex-order: 6; 696 | order: 6; 697 | } 698 | .order-md-7 { 699 | -ms-flex-order: 7; 700 | order: 7; 701 | } 702 | .order-md-8 { 703 | -ms-flex-order: 8; 704 | order: 8; 705 | } 706 | .order-md-9 { 707 | -ms-flex-order: 9; 708 | order: 9; 709 | } 710 | .order-md-10 { 711 | -ms-flex-order: 10; 712 | order: 10; 713 | } 714 | .order-md-11 { 715 | -ms-flex-order: 11; 716 | order: 11; 717 | } 718 | .order-md-12 { 719 | -ms-flex-order: 12; 720 | order: 12; 721 | } 722 | .offset-md-0 { 723 | margin-left: 0; 724 | } 725 | .offset-md-1 { 726 | margin-left: 8.333333%; 727 | } 728 | .offset-md-2 { 729 | margin-left: 16.666667%; 730 | } 731 | .offset-md-3 { 732 | margin-left: 25%; 733 | } 734 | .offset-md-4 { 735 | margin-left: 33.333333%; 736 | } 737 | .offset-md-5 { 738 | margin-left: 41.666667%; 739 | } 740 | .offset-md-6 { 741 | margin-left: 50%; 742 | } 743 | .offset-md-7 { 744 | margin-left: 58.333333%; 745 | } 746 | .offset-md-8 { 747 | margin-left: 66.666667%; 748 | } 749 | .offset-md-9 { 750 | margin-left: 75%; 751 | } 752 | .offset-md-10 { 753 | margin-left: 83.333333%; 754 | } 755 | .offset-md-11 { 756 | margin-left: 91.666667%; 757 | } 758 | } 759 | 760 | @media (min-width: 992px) { 761 | .col-lg { 762 | -ms-flex-preferred-size: 0; 763 | flex-basis: 0; 764 | -ms-flex-positive: 1; 765 | flex-grow: 1; 766 | max-width: 100%; 767 | } 768 | .row-cols-lg-1 > * { 769 | -ms-flex: 0 0 100%; 770 | flex: 0 0 100%; 771 | max-width: 100%; 772 | } 773 | .row-cols-lg-2 > * { 774 | -ms-flex: 0 0 50%; 775 | flex: 0 0 50%; 776 | max-width: 50%; 777 | } 778 | .row-cols-lg-3 > * { 779 | -ms-flex: 0 0 33.333333%; 780 | flex: 0 0 33.333333%; 781 | max-width: 33.333333%; 782 | } 783 | .row-cols-lg-4 > * { 784 | -ms-flex: 0 0 25%; 785 | flex: 0 0 25%; 786 | max-width: 25%; 787 | } 788 | .row-cols-lg-5 > * { 789 | -ms-flex: 0 0 20%; 790 | flex: 0 0 20%; 791 | max-width: 20%; 792 | } 793 | .row-cols-lg-6 > * { 794 | -ms-flex: 0 0 16.666667%; 795 | flex: 0 0 16.666667%; 796 | max-width: 16.666667%; 797 | } 798 | .col-lg-auto { 799 | -ms-flex: 0 0 auto; 800 | flex: 0 0 auto; 801 | width: auto; 802 | max-width: 100%; 803 | } 804 | .col-lg-1 { 805 | -ms-flex: 0 0 8.333333%; 806 | flex: 0 0 8.333333%; 807 | max-width: 8.333333%; 808 | } 809 | .col-lg-2 { 810 | -ms-flex: 0 0 16.666667%; 811 | flex: 0 0 16.666667%; 812 | max-width: 16.666667%; 813 | } 814 | .col-lg-3 { 815 | -ms-flex: 0 0 25%; 816 | flex: 0 0 25%; 817 | max-width: 25%; 818 | } 819 | .col-lg-4 { 820 | -ms-flex: 0 0 33.333333%; 821 | flex: 0 0 33.333333%; 822 | max-width: 33.333333%; 823 | } 824 | .col-lg-5 { 825 | -ms-flex: 0 0 41.666667%; 826 | flex: 0 0 41.666667%; 827 | max-width: 41.666667%; 828 | } 829 | .col-lg-6 { 830 | -ms-flex: 0 0 50%; 831 | flex: 0 0 50%; 832 | max-width: 50%; 833 | } 834 | .col-lg-7 { 835 | -ms-flex: 0 0 58.333333%; 836 | flex: 0 0 58.333333%; 837 | max-width: 58.333333%; 838 | } 839 | .col-lg-8 { 840 | -ms-flex: 0 0 66.666667%; 841 | flex: 0 0 66.666667%; 842 | max-width: 66.666667%; 843 | } 844 | .col-lg-9 { 845 | -ms-flex: 0 0 75%; 846 | flex: 0 0 75%; 847 | max-width: 75%; 848 | } 849 | .col-lg-10 { 850 | -ms-flex: 0 0 83.333333%; 851 | flex: 0 0 83.333333%; 852 | max-width: 83.333333%; 853 | } 854 | .col-lg-11 { 855 | -ms-flex: 0 0 91.666667%; 856 | flex: 0 0 91.666667%; 857 | max-width: 91.666667%; 858 | } 859 | .col-lg-12 { 860 | -ms-flex: 0 0 100%; 861 | flex: 0 0 100%; 862 | max-width: 100%; 863 | } 864 | .order-lg-first { 865 | -ms-flex-order: -1; 866 | order: -1; 867 | } 868 | .order-lg-last { 869 | -ms-flex-order: 13; 870 | order: 13; 871 | } 872 | .order-lg-0 { 873 | -ms-flex-order: 0; 874 | order: 0; 875 | } 876 | .order-lg-1 { 877 | -ms-flex-order: 1; 878 | order: 1; 879 | } 880 | .order-lg-2 { 881 | -ms-flex-order: 2; 882 | order: 2; 883 | } 884 | .order-lg-3 { 885 | -ms-flex-order: 3; 886 | order: 3; 887 | } 888 | .order-lg-4 { 889 | -ms-flex-order: 4; 890 | order: 4; 891 | } 892 | .order-lg-5 { 893 | -ms-flex-order: 5; 894 | order: 5; 895 | } 896 | .order-lg-6 { 897 | -ms-flex-order: 6; 898 | order: 6; 899 | } 900 | .order-lg-7 { 901 | -ms-flex-order: 7; 902 | order: 7; 903 | } 904 | .order-lg-8 { 905 | -ms-flex-order: 8; 906 | order: 8; 907 | } 908 | .order-lg-9 { 909 | -ms-flex-order: 9; 910 | order: 9; 911 | } 912 | .order-lg-10 { 913 | -ms-flex-order: 10; 914 | order: 10; 915 | } 916 | .order-lg-11 { 917 | -ms-flex-order: 11; 918 | order: 11; 919 | } 920 | .order-lg-12 { 921 | -ms-flex-order: 12; 922 | order: 12; 923 | } 924 | .offset-lg-0 { 925 | margin-left: 0; 926 | } 927 | .offset-lg-1 { 928 | margin-left: 8.333333%; 929 | } 930 | .offset-lg-2 { 931 | margin-left: 16.666667%; 932 | } 933 | .offset-lg-3 { 934 | margin-left: 25%; 935 | } 936 | .offset-lg-4 { 937 | margin-left: 33.333333%; 938 | } 939 | .offset-lg-5 { 940 | margin-left: 41.666667%; 941 | } 942 | .offset-lg-6 { 943 | margin-left: 50%; 944 | } 945 | .offset-lg-7 { 946 | margin-left: 58.333333%; 947 | } 948 | .offset-lg-8 { 949 | margin-left: 66.666667%; 950 | } 951 | .offset-lg-9 { 952 | margin-left: 75%; 953 | } 954 | .offset-lg-10 { 955 | margin-left: 83.333333%; 956 | } 957 | .offset-lg-11 { 958 | margin-left: 91.666667%; 959 | } 960 | } 961 | 962 | @media (min-width: 1200px) { 963 | .col-xl { 964 | -ms-flex-preferred-size: 0; 965 | flex-basis: 0; 966 | -ms-flex-positive: 1; 967 | flex-grow: 1; 968 | max-width: 100%; 969 | } 970 | .row-cols-xl-1 > * { 971 | -ms-flex: 0 0 100%; 972 | flex: 0 0 100%; 973 | max-width: 100%; 974 | } 975 | .row-cols-xl-2 > * { 976 | -ms-flex: 0 0 50%; 977 | flex: 0 0 50%; 978 | max-width: 50%; 979 | } 980 | .row-cols-xl-3 > * { 981 | -ms-flex: 0 0 33.333333%; 982 | flex: 0 0 33.333333%; 983 | max-width: 33.333333%; 984 | } 985 | .row-cols-xl-4 > * { 986 | -ms-flex: 0 0 25%; 987 | flex: 0 0 25%; 988 | max-width: 25%; 989 | } 990 | .row-cols-xl-5 > * { 991 | -ms-flex: 0 0 20%; 992 | flex: 0 0 20%; 993 | max-width: 20%; 994 | } 995 | .row-cols-xl-6 > * { 996 | -ms-flex: 0 0 16.666667%; 997 | flex: 0 0 16.666667%; 998 | max-width: 16.666667%; 999 | } 1000 | .col-xl-auto { 1001 | -ms-flex: 0 0 auto; 1002 | flex: 0 0 auto; 1003 | width: auto; 1004 | max-width: 100%; 1005 | } 1006 | .col-xl-1 { 1007 | -ms-flex: 0 0 8.333333%; 1008 | flex: 0 0 8.333333%; 1009 | max-width: 8.333333%; 1010 | } 1011 | .col-xl-2 { 1012 | -ms-flex: 0 0 16.666667%; 1013 | flex: 0 0 16.666667%; 1014 | max-width: 16.666667%; 1015 | } 1016 | .col-xl-3 { 1017 | -ms-flex: 0 0 25%; 1018 | flex: 0 0 25%; 1019 | max-width: 25%; 1020 | } 1021 | .col-xl-4 { 1022 | -ms-flex: 0 0 33.333333%; 1023 | flex: 0 0 33.333333%; 1024 | max-width: 33.333333%; 1025 | } 1026 | .col-xl-5 { 1027 | -ms-flex: 0 0 41.666667%; 1028 | flex: 0 0 41.666667%; 1029 | max-width: 41.666667%; 1030 | } 1031 | .col-xl-6 { 1032 | -ms-flex: 0 0 50%; 1033 | flex: 0 0 50%; 1034 | max-width: 50%; 1035 | } 1036 | .col-xl-7 { 1037 | -ms-flex: 0 0 58.333333%; 1038 | flex: 0 0 58.333333%; 1039 | max-width: 58.333333%; 1040 | } 1041 | .col-xl-8 { 1042 | -ms-flex: 0 0 66.666667%; 1043 | flex: 0 0 66.666667%; 1044 | max-width: 66.666667%; 1045 | } 1046 | .col-xl-9 { 1047 | -ms-flex: 0 0 75%; 1048 | flex: 0 0 75%; 1049 | max-width: 75%; 1050 | } 1051 | .col-xl-10 { 1052 | -ms-flex: 0 0 83.333333%; 1053 | flex: 0 0 83.333333%; 1054 | max-width: 83.333333%; 1055 | } 1056 | .col-xl-11 { 1057 | -ms-flex: 0 0 91.666667%; 1058 | flex: 0 0 91.666667%; 1059 | max-width: 91.666667%; 1060 | } 1061 | .col-xl-12 { 1062 | -ms-flex: 0 0 100%; 1063 | flex: 0 0 100%; 1064 | max-width: 100%; 1065 | } 1066 | .order-xl-first { 1067 | -ms-flex-order: -1; 1068 | order: -1; 1069 | } 1070 | .order-xl-last { 1071 | -ms-flex-order: 13; 1072 | order: 13; 1073 | } 1074 | .order-xl-0 { 1075 | -ms-flex-order: 0; 1076 | order: 0; 1077 | } 1078 | .order-xl-1 { 1079 | -ms-flex-order: 1; 1080 | order: 1; 1081 | } 1082 | .order-xl-2 { 1083 | -ms-flex-order: 2; 1084 | order: 2; 1085 | } 1086 | .order-xl-3 { 1087 | -ms-flex-order: 3; 1088 | order: 3; 1089 | } 1090 | .order-xl-4 { 1091 | -ms-flex-order: 4; 1092 | order: 4; 1093 | } 1094 | .order-xl-5 { 1095 | -ms-flex-order: 5; 1096 | order: 5; 1097 | } 1098 | .order-xl-6 { 1099 | -ms-flex-order: 6; 1100 | order: 6; 1101 | } 1102 | .order-xl-7 { 1103 | -ms-flex-order: 7; 1104 | order: 7; 1105 | } 1106 | .order-xl-8 { 1107 | -ms-flex-order: 8; 1108 | order: 8; 1109 | } 1110 | .order-xl-9 { 1111 | -ms-flex-order: 9; 1112 | order: 9; 1113 | } 1114 | .order-xl-10 { 1115 | -ms-flex-order: 10; 1116 | order: 10; 1117 | } 1118 | .order-xl-11 { 1119 | -ms-flex-order: 11; 1120 | order: 11; 1121 | } 1122 | .order-xl-12 { 1123 | -ms-flex-order: 12; 1124 | order: 12; 1125 | } 1126 | .offset-xl-0 { 1127 | margin-left: 0; 1128 | } 1129 | .offset-xl-1 { 1130 | margin-left: 8.333333%; 1131 | } 1132 | .offset-xl-2 { 1133 | margin-left: 16.666667%; 1134 | } 1135 | .offset-xl-3 { 1136 | margin-left: 25%; 1137 | } 1138 | .offset-xl-4 { 1139 | margin-left: 33.333333%; 1140 | } 1141 | .offset-xl-5 { 1142 | margin-left: 41.666667%; 1143 | } 1144 | .offset-xl-6 { 1145 | margin-left: 50%; 1146 | } 1147 | .offset-xl-7 { 1148 | margin-left: 58.333333%; 1149 | } 1150 | .offset-xl-8 { 1151 | margin-left: 66.666667%; 1152 | } 1153 | .offset-xl-9 { 1154 | margin-left: 75%; 1155 | } 1156 | .offset-xl-10 { 1157 | margin-left: 83.333333%; 1158 | } 1159 | .offset-xl-11 { 1160 | margin-left: 91.666667%; 1161 | } 1162 | } 1163 | 1164 | .d-none { 1165 | display: none !important; 1166 | } 1167 | 1168 | .d-inline { 1169 | display: inline !important; 1170 | } 1171 | 1172 | .d-inline-block { 1173 | display: inline-block !important; 1174 | } 1175 | 1176 | .d-block { 1177 | display: block !important; 1178 | } 1179 | 1180 | .d-table { 1181 | display: table !important; 1182 | } 1183 | 1184 | .d-table-row { 1185 | display: table-row !important; 1186 | } 1187 | 1188 | .d-table-cell { 1189 | display: table-cell !important; 1190 | } 1191 | 1192 | .d-flex { 1193 | display: -ms-flexbox !important; 1194 | display: flex !important; 1195 | } 1196 | 1197 | .d-inline-flex { 1198 | display: -ms-inline-flexbox !important; 1199 | display: inline-flex !important; 1200 | } 1201 | 1202 | @media (min-width: 576px) { 1203 | .d-sm-none { 1204 | display: none !important; 1205 | } 1206 | .d-sm-inline { 1207 | display: inline !important; 1208 | } 1209 | .d-sm-inline-block { 1210 | display: inline-block !important; 1211 | } 1212 | .d-sm-block { 1213 | display: block !important; 1214 | } 1215 | .d-sm-table { 1216 | display: table !important; 1217 | } 1218 | .d-sm-table-row { 1219 | display: table-row !important; 1220 | } 1221 | .d-sm-table-cell { 1222 | display: table-cell !important; 1223 | } 1224 | .d-sm-flex { 1225 | display: -ms-flexbox !important; 1226 | display: flex !important; 1227 | } 1228 | .d-sm-inline-flex { 1229 | display: -ms-inline-flexbox !important; 1230 | display: inline-flex !important; 1231 | } 1232 | } 1233 | 1234 | @media (min-width: 768px) { 1235 | .d-md-none { 1236 | display: none !important; 1237 | } 1238 | .d-md-inline { 1239 | display: inline !important; 1240 | } 1241 | .d-md-inline-block { 1242 | display: inline-block !important; 1243 | } 1244 | .d-md-block { 1245 | display: block !important; 1246 | } 1247 | .d-md-table { 1248 | display: table !important; 1249 | } 1250 | .d-md-table-row { 1251 | display: table-row !important; 1252 | } 1253 | .d-md-table-cell { 1254 | display: table-cell !important; 1255 | } 1256 | .d-md-flex { 1257 | display: -ms-flexbox !important; 1258 | display: flex !important; 1259 | } 1260 | .d-md-inline-flex { 1261 | display: -ms-inline-flexbox !important; 1262 | display: inline-flex !important; 1263 | } 1264 | } 1265 | 1266 | @media (min-width: 992px) { 1267 | .d-lg-none { 1268 | display: none !important; 1269 | } 1270 | .d-lg-inline { 1271 | display: inline !important; 1272 | } 1273 | .d-lg-inline-block { 1274 | display: inline-block !important; 1275 | } 1276 | .d-lg-block { 1277 | display: block !important; 1278 | } 1279 | .d-lg-table { 1280 | display: table !important; 1281 | } 1282 | .d-lg-table-row { 1283 | display: table-row !important; 1284 | } 1285 | .d-lg-table-cell { 1286 | display: table-cell !important; 1287 | } 1288 | .d-lg-flex { 1289 | display: -ms-flexbox !important; 1290 | display: flex !important; 1291 | } 1292 | .d-lg-inline-flex { 1293 | display: -ms-inline-flexbox !important; 1294 | display: inline-flex !important; 1295 | } 1296 | } 1297 | 1298 | @media (min-width: 1200px) { 1299 | .d-xl-none { 1300 | display: none !important; 1301 | } 1302 | .d-xl-inline { 1303 | display: inline !important; 1304 | } 1305 | .d-xl-inline-block { 1306 | display: inline-block !important; 1307 | } 1308 | .d-xl-block { 1309 | display: block !important; 1310 | } 1311 | .d-xl-table { 1312 | display: table !important; 1313 | } 1314 | .d-xl-table-row { 1315 | display: table-row !important; 1316 | } 1317 | .d-xl-table-cell { 1318 | display: table-cell !important; 1319 | } 1320 | .d-xl-flex { 1321 | display: -ms-flexbox !important; 1322 | display: flex !important; 1323 | } 1324 | .d-xl-inline-flex { 1325 | display: -ms-inline-flexbox !important; 1326 | display: inline-flex !important; 1327 | } 1328 | } 1329 | 1330 | @media print { 1331 | .d-print-none { 1332 | display: none !important; 1333 | } 1334 | .d-print-inline { 1335 | display: inline !important; 1336 | } 1337 | .d-print-inline-block { 1338 | display: inline-block !important; 1339 | } 1340 | .d-print-block { 1341 | display: block !important; 1342 | } 1343 | .d-print-table { 1344 | display: table !important; 1345 | } 1346 | .d-print-table-row { 1347 | display: table-row !important; 1348 | } 1349 | .d-print-table-cell { 1350 | display: table-cell !important; 1351 | } 1352 | .d-print-flex { 1353 | display: -ms-flexbox !important; 1354 | display: flex !important; 1355 | } 1356 | .d-print-inline-flex { 1357 | display: -ms-inline-flexbox !important; 1358 | display: inline-flex !important; 1359 | } 1360 | } 1361 | 1362 | .flex-row { 1363 | -ms-flex-direction: row !important; 1364 | flex-direction: row !important; 1365 | } 1366 | 1367 | .flex-column { 1368 | -ms-flex-direction: column !important; 1369 | flex-direction: column !important; 1370 | } 1371 | 1372 | .flex-row-reverse { 1373 | -ms-flex-direction: row-reverse !important; 1374 | flex-direction: row-reverse !important; 1375 | } 1376 | 1377 | .flex-column-reverse { 1378 | -ms-flex-direction: column-reverse !important; 1379 | flex-direction: column-reverse !important; 1380 | } 1381 | 1382 | .flex-wrap { 1383 | -ms-flex-wrap: wrap !important; 1384 | flex-wrap: wrap !important; 1385 | } 1386 | 1387 | .flex-nowrap { 1388 | -ms-flex-wrap: nowrap !important; 1389 | flex-wrap: nowrap !important; 1390 | } 1391 | 1392 | .flex-wrap-reverse { 1393 | -ms-flex-wrap: wrap-reverse !important; 1394 | flex-wrap: wrap-reverse !important; 1395 | } 1396 | 1397 | .flex-fill { 1398 | -ms-flex: 1 1 auto !important; 1399 | flex: 1 1 auto !important; 1400 | } 1401 | 1402 | .flex-grow-0 { 1403 | -ms-flex-positive: 0 !important; 1404 | flex-grow: 0 !important; 1405 | } 1406 | 1407 | .flex-grow-1 { 1408 | -ms-flex-positive: 1 !important; 1409 | flex-grow: 1 !important; 1410 | } 1411 | 1412 | .flex-shrink-0 { 1413 | -ms-flex-negative: 0 !important; 1414 | flex-shrink: 0 !important; 1415 | } 1416 | 1417 | .flex-shrink-1 { 1418 | -ms-flex-negative: 1 !important; 1419 | flex-shrink: 1 !important; 1420 | } 1421 | 1422 | .justify-content-start { 1423 | -ms-flex-pack: start !important; 1424 | justify-content: flex-start !important; 1425 | } 1426 | 1427 | .justify-content-end { 1428 | -ms-flex-pack: end !important; 1429 | justify-content: flex-end !important; 1430 | } 1431 | 1432 | .justify-content-center { 1433 | -ms-flex-pack: center !important; 1434 | justify-content: center !important; 1435 | } 1436 | 1437 | .justify-content-between { 1438 | -ms-flex-pack: justify !important; 1439 | justify-content: space-between !important; 1440 | } 1441 | 1442 | .justify-content-around { 1443 | -ms-flex-pack: distribute !important; 1444 | justify-content: space-around !important; 1445 | } 1446 | 1447 | .align-items-start { 1448 | -ms-flex-align: start !important; 1449 | align-items: flex-start !important; 1450 | } 1451 | 1452 | .align-items-end { 1453 | -ms-flex-align: end !important; 1454 | align-items: flex-end !important; 1455 | } 1456 | 1457 | .align-items-center { 1458 | -ms-flex-align: center !important; 1459 | align-items: center !important; 1460 | } 1461 | 1462 | .align-items-baseline { 1463 | -ms-flex-align: baseline !important; 1464 | align-items: baseline !important; 1465 | } 1466 | 1467 | .align-items-stretch { 1468 | -ms-flex-align: stretch !important; 1469 | align-items: stretch !important; 1470 | } 1471 | 1472 | .align-content-start { 1473 | -ms-flex-line-pack: start !important; 1474 | align-content: flex-start !important; 1475 | } 1476 | 1477 | .align-content-end { 1478 | -ms-flex-line-pack: end !important; 1479 | align-content: flex-end !important; 1480 | } 1481 | 1482 | .align-content-center { 1483 | -ms-flex-line-pack: center !important; 1484 | align-content: center !important; 1485 | } 1486 | 1487 | .align-content-between { 1488 | -ms-flex-line-pack: justify !important; 1489 | align-content: space-between !important; 1490 | } 1491 | 1492 | .align-content-around { 1493 | -ms-flex-line-pack: distribute !important; 1494 | align-content: space-around !important; 1495 | } 1496 | 1497 | .align-content-stretch { 1498 | -ms-flex-line-pack: stretch !important; 1499 | align-content: stretch !important; 1500 | } 1501 | 1502 | .align-self-auto { 1503 | -ms-flex-item-align: auto !important; 1504 | align-self: auto !important; 1505 | } 1506 | 1507 | .align-self-start { 1508 | -ms-flex-item-align: start !important; 1509 | align-self: flex-start !important; 1510 | } 1511 | 1512 | .align-self-end { 1513 | -ms-flex-item-align: end !important; 1514 | align-self: flex-end !important; 1515 | } 1516 | 1517 | .align-self-center { 1518 | -ms-flex-item-align: center !important; 1519 | align-self: center !important; 1520 | } 1521 | 1522 | .align-self-baseline { 1523 | -ms-flex-item-align: baseline !important; 1524 | align-self: baseline !important; 1525 | } 1526 | 1527 | .align-self-stretch { 1528 | -ms-flex-item-align: stretch !important; 1529 | align-self: stretch !important; 1530 | } 1531 | 1532 | @media (min-width: 576px) { 1533 | .flex-sm-row { 1534 | -ms-flex-direction: row !important; 1535 | flex-direction: row !important; 1536 | } 1537 | .flex-sm-column { 1538 | -ms-flex-direction: column !important; 1539 | flex-direction: column !important; 1540 | } 1541 | .flex-sm-row-reverse { 1542 | -ms-flex-direction: row-reverse !important; 1543 | flex-direction: row-reverse !important; 1544 | } 1545 | .flex-sm-column-reverse { 1546 | -ms-flex-direction: column-reverse !important; 1547 | flex-direction: column-reverse !important; 1548 | } 1549 | .flex-sm-wrap { 1550 | -ms-flex-wrap: wrap !important; 1551 | flex-wrap: wrap !important; 1552 | } 1553 | .flex-sm-nowrap { 1554 | -ms-flex-wrap: nowrap !important; 1555 | flex-wrap: nowrap !important; 1556 | } 1557 | .flex-sm-wrap-reverse { 1558 | -ms-flex-wrap: wrap-reverse !important; 1559 | flex-wrap: wrap-reverse !important; 1560 | } 1561 | .flex-sm-fill { 1562 | -ms-flex: 1 1 auto !important; 1563 | flex: 1 1 auto !important; 1564 | } 1565 | .flex-sm-grow-0 { 1566 | -ms-flex-positive: 0 !important; 1567 | flex-grow: 0 !important; 1568 | } 1569 | .flex-sm-grow-1 { 1570 | -ms-flex-positive: 1 !important; 1571 | flex-grow: 1 !important; 1572 | } 1573 | .flex-sm-shrink-0 { 1574 | -ms-flex-negative: 0 !important; 1575 | flex-shrink: 0 !important; 1576 | } 1577 | .flex-sm-shrink-1 { 1578 | -ms-flex-negative: 1 !important; 1579 | flex-shrink: 1 !important; 1580 | } 1581 | .justify-content-sm-start { 1582 | -ms-flex-pack: start !important; 1583 | justify-content: flex-start !important; 1584 | } 1585 | .justify-content-sm-end { 1586 | -ms-flex-pack: end !important; 1587 | justify-content: flex-end !important; 1588 | } 1589 | .justify-content-sm-center { 1590 | -ms-flex-pack: center !important; 1591 | justify-content: center !important; 1592 | } 1593 | .justify-content-sm-between { 1594 | -ms-flex-pack: justify !important; 1595 | justify-content: space-between !important; 1596 | } 1597 | .justify-content-sm-around { 1598 | -ms-flex-pack: distribute !important; 1599 | justify-content: space-around !important; 1600 | } 1601 | .align-items-sm-start { 1602 | -ms-flex-align: start !important; 1603 | align-items: flex-start !important; 1604 | } 1605 | .align-items-sm-end { 1606 | -ms-flex-align: end !important; 1607 | align-items: flex-end !important; 1608 | } 1609 | .align-items-sm-center { 1610 | -ms-flex-align: center !important; 1611 | align-items: center !important; 1612 | } 1613 | .align-items-sm-baseline { 1614 | -ms-flex-align: baseline !important; 1615 | align-items: baseline !important; 1616 | } 1617 | .align-items-sm-stretch { 1618 | -ms-flex-align: stretch !important; 1619 | align-items: stretch !important; 1620 | } 1621 | .align-content-sm-start { 1622 | -ms-flex-line-pack: start !important; 1623 | align-content: flex-start !important; 1624 | } 1625 | .align-content-sm-end { 1626 | -ms-flex-line-pack: end !important; 1627 | align-content: flex-end !important; 1628 | } 1629 | .align-content-sm-center { 1630 | -ms-flex-line-pack: center !important; 1631 | align-content: center !important; 1632 | } 1633 | .align-content-sm-between { 1634 | -ms-flex-line-pack: justify !important; 1635 | align-content: space-between !important; 1636 | } 1637 | .align-content-sm-around { 1638 | -ms-flex-line-pack: distribute !important; 1639 | align-content: space-around !important; 1640 | } 1641 | .align-content-sm-stretch { 1642 | -ms-flex-line-pack: stretch !important; 1643 | align-content: stretch !important; 1644 | } 1645 | .align-self-sm-auto { 1646 | -ms-flex-item-align: auto !important; 1647 | align-self: auto !important; 1648 | } 1649 | .align-self-sm-start { 1650 | -ms-flex-item-align: start !important; 1651 | align-self: flex-start !important; 1652 | } 1653 | .align-self-sm-end { 1654 | -ms-flex-item-align: end !important; 1655 | align-self: flex-end !important; 1656 | } 1657 | .align-self-sm-center { 1658 | -ms-flex-item-align: center !important; 1659 | align-self: center !important; 1660 | } 1661 | .align-self-sm-baseline { 1662 | -ms-flex-item-align: baseline !important; 1663 | align-self: baseline !important; 1664 | } 1665 | .align-self-sm-stretch { 1666 | -ms-flex-item-align: stretch !important; 1667 | align-self: stretch !important; 1668 | } 1669 | } 1670 | 1671 | @media (min-width: 768px) { 1672 | .flex-md-row { 1673 | -ms-flex-direction: row !important; 1674 | flex-direction: row !important; 1675 | } 1676 | .flex-md-column { 1677 | -ms-flex-direction: column !important; 1678 | flex-direction: column !important; 1679 | } 1680 | .flex-md-row-reverse { 1681 | -ms-flex-direction: row-reverse !important; 1682 | flex-direction: row-reverse !important; 1683 | } 1684 | .flex-md-column-reverse { 1685 | -ms-flex-direction: column-reverse !important; 1686 | flex-direction: column-reverse !important; 1687 | } 1688 | .flex-md-wrap { 1689 | -ms-flex-wrap: wrap !important; 1690 | flex-wrap: wrap !important; 1691 | } 1692 | .flex-md-nowrap { 1693 | -ms-flex-wrap: nowrap !important; 1694 | flex-wrap: nowrap !important; 1695 | } 1696 | .flex-md-wrap-reverse { 1697 | -ms-flex-wrap: wrap-reverse !important; 1698 | flex-wrap: wrap-reverse !important; 1699 | } 1700 | .flex-md-fill { 1701 | -ms-flex: 1 1 auto !important; 1702 | flex: 1 1 auto !important; 1703 | } 1704 | .flex-md-grow-0 { 1705 | -ms-flex-positive: 0 !important; 1706 | flex-grow: 0 !important; 1707 | } 1708 | .flex-md-grow-1 { 1709 | -ms-flex-positive: 1 !important; 1710 | flex-grow: 1 !important; 1711 | } 1712 | .flex-md-shrink-0 { 1713 | -ms-flex-negative: 0 !important; 1714 | flex-shrink: 0 !important; 1715 | } 1716 | .flex-md-shrink-1 { 1717 | -ms-flex-negative: 1 !important; 1718 | flex-shrink: 1 !important; 1719 | } 1720 | .justify-content-md-start { 1721 | -ms-flex-pack: start !important; 1722 | justify-content: flex-start !important; 1723 | } 1724 | .justify-content-md-end { 1725 | -ms-flex-pack: end !important; 1726 | justify-content: flex-end !important; 1727 | } 1728 | .justify-content-md-center { 1729 | -ms-flex-pack: center !important; 1730 | justify-content: center !important; 1731 | } 1732 | .justify-content-md-between { 1733 | -ms-flex-pack: justify !important; 1734 | justify-content: space-between !important; 1735 | } 1736 | .justify-content-md-around { 1737 | -ms-flex-pack: distribute !important; 1738 | justify-content: space-around !important; 1739 | } 1740 | .align-items-md-start { 1741 | -ms-flex-align: start !important; 1742 | align-items: flex-start !important; 1743 | } 1744 | .align-items-md-end { 1745 | -ms-flex-align: end !important; 1746 | align-items: flex-end !important; 1747 | } 1748 | .align-items-md-center { 1749 | -ms-flex-align: center !important; 1750 | align-items: center !important; 1751 | } 1752 | .align-items-md-baseline { 1753 | -ms-flex-align: baseline !important; 1754 | align-items: baseline !important; 1755 | } 1756 | .align-items-md-stretch { 1757 | -ms-flex-align: stretch !important; 1758 | align-items: stretch !important; 1759 | } 1760 | .align-content-md-start { 1761 | -ms-flex-line-pack: start !important; 1762 | align-content: flex-start !important; 1763 | } 1764 | .align-content-md-end { 1765 | -ms-flex-line-pack: end !important; 1766 | align-content: flex-end !important; 1767 | } 1768 | .align-content-md-center { 1769 | -ms-flex-line-pack: center !important; 1770 | align-content: center !important; 1771 | } 1772 | .align-content-md-between { 1773 | -ms-flex-line-pack: justify !important; 1774 | align-content: space-between !important; 1775 | } 1776 | .align-content-md-around { 1777 | -ms-flex-line-pack: distribute !important; 1778 | align-content: space-around !important; 1779 | } 1780 | .align-content-md-stretch { 1781 | -ms-flex-line-pack: stretch !important; 1782 | align-content: stretch !important; 1783 | } 1784 | .align-self-md-auto { 1785 | -ms-flex-item-align: auto !important; 1786 | align-self: auto !important; 1787 | } 1788 | .align-self-md-start { 1789 | -ms-flex-item-align: start !important; 1790 | align-self: flex-start !important; 1791 | } 1792 | .align-self-md-end { 1793 | -ms-flex-item-align: end !important; 1794 | align-self: flex-end !important; 1795 | } 1796 | .align-self-md-center { 1797 | -ms-flex-item-align: center !important; 1798 | align-self: center !important; 1799 | } 1800 | .align-self-md-baseline { 1801 | -ms-flex-item-align: baseline !important; 1802 | align-self: baseline !important; 1803 | } 1804 | .align-self-md-stretch { 1805 | -ms-flex-item-align: stretch !important; 1806 | align-self: stretch !important; 1807 | } 1808 | } 1809 | 1810 | @media (min-width: 992px) { 1811 | .flex-lg-row { 1812 | -ms-flex-direction: row !important; 1813 | flex-direction: row !important; 1814 | } 1815 | .flex-lg-column { 1816 | -ms-flex-direction: column !important; 1817 | flex-direction: column !important; 1818 | } 1819 | .flex-lg-row-reverse { 1820 | -ms-flex-direction: row-reverse !important; 1821 | flex-direction: row-reverse !important; 1822 | } 1823 | .flex-lg-column-reverse { 1824 | -ms-flex-direction: column-reverse !important; 1825 | flex-direction: column-reverse !important; 1826 | } 1827 | .flex-lg-wrap { 1828 | -ms-flex-wrap: wrap !important; 1829 | flex-wrap: wrap !important; 1830 | } 1831 | .flex-lg-nowrap { 1832 | -ms-flex-wrap: nowrap !important; 1833 | flex-wrap: nowrap !important; 1834 | } 1835 | .flex-lg-wrap-reverse { 1836 | -ms-flex-wrap: wrap-reverse !important; 1837 | flex-wrap: wrap-reverse !important; 1838 | } 1839 | .flex-lg-fill { 1840 | -ms-flex: 1 1 auto !important; 1841 | flex: 1 1 auto !important; 1842 | } 1843 | .flex-lg-grow-0 { 1844 | -ms-flex-positive: 0 !important; 1845 | flex-grow: 0 !important; 1846 | } 1847 | .flex-lg-grow-1 { 1848 | -ms-flex-positive: 1 !important; 1849 | flex-grow: 1 !important; 1850 | } 1851 | .flex-lg-shrink-0 { 1852 | -ms-flex-negative: 0 !important; 1853 | flex-shrink: 0 !important; 1854 | } 1855 | .flex-lg-shrink-1 { 1856 | -ms-flex-negative: 1 !important; 1857 | flex-shrink: 1 !important; 1858 | } 1859 | .justify-content-lg-start { 1860 | -ms-flex-pack: start !important; 1861 | justify-content: flex-start !important; 1862 | } 1863 | .justify-content-lg-end { 1864 | -ms-flex-pack: end !important; 1865 | justify-content: flex-end !important; 1866 | } 1867 | .justify-content-lg-center { 1868 | -ms-flex-pack: center !important; 1869 | justify-content: center !important; 1870 | } 1871 | .justify-content-lg-between { 1872 | -ms-flex-pack: justify !important; 1873 | justify-content: space-between !important; 1874 | } 1875 | .justify-content-lg-around { 1876 | -ms-flex-pack: distribute !important; 1877 | justify-content: space-around !important; 1878 | } 1879 | .align-items-lg-start { 1880 | -ms-flex-align: start !important; 1881 | align-items: flex-start !important; 1882 | } 1883 | .align-items-lg-end { 1884 | -ms-flex-align: end !important; 1885 | align-items: flex-end !important; 1886 | } 1887 | .align-items-lg-center { 1888 | -ms-flex-align: center !important; 1889 | align-items: center !important; 1890 | } 1891 | .align-items-lg-baseline { 1892 | -ms-flex-align: baseline !important; 1893 | align-items: baseline !important; 1894 | } 1895 | .align-items-lg-stretch { 1896 | -ms-flex-align: stretch !important; 1897 | align-items: stretch !important; 1898 | } 1899 | .align-content-lg-start { 1900 | -ms-flex-line-pack: start !important; 1901 | align-content: flex-start !important; 1902 | } 1903 | .align-content-lg-end { 1904 | -ms-flex-line-pack: end !important; 1905 | align-content: flex-end !important; 1906 | } 1907 | .align-content-lg-center { 1908 | -ms-flex-line-pack: center !important; 1909 | align-content: center !important; 1910 | } 1911 | .align-content-lg-between { 1912 | -ms-flex-line-pack: justify !important; 1913 | align-content: space-between !important; 1914 | } 1915 | .align-content-lg-around { 1916 | -ms-flex-line-pack: distribute !important; 1917 | align-content: space-around !important; 1918 | } 1919 | .align-content-lg-stretch { 1920 | -ms-flex-line-pack: stretch !important; 1921 | align-content: stretch !important; 1922 | } 1923 | .align-self-lg-auto { 1924 | -ms-flex-item-align: auto !important; 1925 | align-self: auto !important; 1926 | } 1927 | .align-self-lg-start { 1928 | -ms-flex-item-align: start !important; 1929 | align-self: flex-start !important; 1930 | } 1931 | .align-self-lg-end { 1932 | -ms-flex-item-align: end !important; 1933 | align-self: flex-end !important; 1934 | } 1935 | .align-self-lg-center { 1936 | -ms-flex-item-align: center !important; 1937 | align-self: center !important; 1938 | } 1939 | .align-self-lg-baseline { 1940 | -ms-flex-item-align: baseline !important; 1941 | align-self: baseline !important; 1942 | } 1943 | .align-self-lg-stretch { 1944 | -ms-flex-item-align: stretch !important; 1945 | align-self: stretch !important; 1946 | } 1947 | } 1948 | 1949 | @media (min-width: 1200px) { 1950 | .flex-xl-row { 1951 | -ms-flex-direction: row !important; 1952 | flex-direction: row !important; 1953 | } 1954 | .flex-xl-column { 1955 | -ms-flex-direction: column !important; 1956 | flex-direction: column !important; 1957 | } 1958 | .flex-xl-row-reverse { 1959 | -ms-flex-direction: row-reverse !important; 1960 | flex-direction: row-reverse !important; 1961 | } 1962 | .flex-xl-column-reverse { 1963 | -ms-flex-direction: column-reverse !important; 1964 | flex-direction: column-reverse !important; 1965 | } 1966 | .flex-xl-wrap { 1967 | -ms-flex-wrap: wrap !important; 1968 | flex-wrap: wrap !important; 1969 | } 1970 | .flex-xl-nowrap { 1971 | -ms-flex-wrap: nowrap !important; 1972 | flex-wrap: nowrap !important; 1973 | } 1974 | .flex-xl-wrap-reverse { 1975 | -ms-flex-wrap: wrap-reverse !important; 1976 | flex-wrap: wrap-reverse !important; 1977 | } 1978 | .flex-xl-fill { 1979 | -ms-flex: 1 1 auto !important; 1980 | flex: 1 1 auto !important; 1981 | } 1982 | .flex-xl-grow-0 { 1983 | -ms-flex-positive: 0 !important; 1984 | flex-grow: 0 !important; 1985 | } 1986 | .flex-xl-grow-1 { 1987 | -ms-flex-positive: 1 !important; 1988 | flex-grow: 1 !important; 1989 | } 1990 | .flex-xl-shrink-0 { 1991 | -ms-flex-negative: 0 !important; 1992 | flex-shrink: 0 !important; 1993 | } 1994 | .flex-xl-shrink-1 { 1995 | -ms-flex-negative: 1 !important; 1996 | flex-shrink: 1 !important; 1997 | } 1998 | .justify-content-xl-start { 1999 | -ms-flex-pack: start !important; 2000 | justify-content: flex-start !important; 2001 | } 2002 | .justify-content-xl-end { 2003 | -ms-flex-pack: end !important; 2004 | justify-content: flex-end !important; 2005 | } 2006 | .justify-content-xl-center { 2007 | -ms-flex-pack: center !important; 2008 | justify-content: center !important; 2009 | } 2010 | .justify-content-xl-between { 2011 | -ms-flex-pack: justify !important; 2012 | justify-content: space-between !important; 2013 | } 2014 | .justify-content-xl-around { 2015 | -ms-flex-pack: distribute !important; 2016 | justify-content: space-around !important; 2017 | } 2018 | .align-items-xl-start { 2019 | -ms-flex-align: start !important; 2020 | align-items: flex-start !important; 2021 | } 2022 | .align-items-xl-end { 2023 | -ms-flex-align: end !important; 2024 | align-items: flex-end !important; 2025 | } 2026 | .align-items-xl-center { 2027 | -ms-flex-align: center !important; 2028 | align-items: center !important; 2029 | } 2030 | .align-items-xl-baseline { 2031 | -ms-flex-align: baseline !important; 2032 | align-items: baseline !important; 2033 | } 2034 | .align-items-xl-stretch { 2035 | -ms-flex-align: stretch !important; 2036 | align-items: stretch !important; 2037 | } 2038 | .align-content-xl-start { 2039 | -ms-flex-line-pack: start !important; 2040 | align-content: flex-start !important; 2041 | } 2042 | .align-content-xl-end { 2043 | -ms-flex-line-pack: end !important; 2044 | align-content: flex-end !important; 2045 | } 2046 | .align-content-xl-center { 2047 | -ms-flex-line-pack: center !important; 2048 | align-content: center !important; 2049 | } 2050 | .align-content-xl-between { 2051 | -ms-flex-line-pack: justify !important; 2052 | align-content: space-between !important; 2053 | } 2054 | .align-content-xl-around { 2055 | -ms-flex-line-pack: distribute !important; 2056 | align-content: space-around !important; 2057 | } 2058 | .align-content-xl-stretch { 2059 | -ms-flex-line-pack: stretch !important; 2060 | align-content: stretch !important; 2061 | } 2062 | .align-self-xl-auto { 2063 | -ms-flex-item-align: auto !important; 2064 | align-self: auto !important; 2065 | } 2066 | .align-self-xl-start { 2067 | -ms-flex-item-align: start !important; 2068 | align-self: flex-start !important; 2069 | } 2070 | .align-self-xl-end { 2071 | -ms-flex-item-align: end !important; 2072 | align-self: flex-end !important; 2073 | } 2074 | .align-self-xl-center { 2075 | -ms-flex-item-align: center !important; 2076 | align-self: center !important; 2077 | } 2078 | .align-self-xl-baseline { 2079 | -ms-flex-item-align: baseline !important; 2080 | align-self: baseline !important; 2081 | } 2082 | .align-self-xl-stretch { 2083 | -ms-flex-item-align: stretch !important; 2084 | align-self: stretch !important; 2085 | } 2086 | } 2087 | 2088 | .m-0 { 2089 | margin: 0 !important; 2090 | } 2091 | 2092 | .mt-0, 2093 | .my-0 { 2094 | margin-top: 0 !important; 2095 | } 2096 | 2097 | .mr-0, 2098 | .mx-0 { 2099 | margin-right: 0 !important; 2100 | } 2101 | 2102 | .mb-0, 2103 | .my-0 { 2104 | margin-bottom: 0 !important; 2105 | } 2106 | 2107 | .ml-0, 2108 | .mx-0 { 2109 | margin-left: 0 !important; 2110 | } 2111 | 2112 | .m-1 { 2113 | margin: 0.25rem !important; 2114 | } 2115 | 2116 | .mt-1, 2117 | .my-1 { 2118 | margin-top: 0.25rem !important; 2119 | } 2120 | 2121 | .mr-1, 2122 | .mx-1 { 2123 | margin-right: 0.25rem !important; 2124 | } 2125 | 2126 | .mb-1, 2127 | .my-1 { 2128 | margin-bottom: 0.25rem !important; 2129 | } 2130 | 2131 | .ml-1, 2132 | .mx-1 { 2133 | margin-left: 0.25rem !important; 2134 | } 2135 | 2136 | .m-2 { 2137 | margin: 0.5rem !important; 2138 | } 2139 | 2140 | .mt-2, 2141 | .my-2 { 2142 | margin-top: 0.5rem !important; 2143 | } 2144 | 2145 | .mr-2, 2146 | .mx-2 { 2147 | margin-right: 0.5rem !important; 2148 | } 2149 | 2150 | .mb-2, 2151 | .my-2 { 2152 | margin-bottom: 0.5rem !important; 2153 | } 2154 | 2155 | .ml-2, 2156 | .mx-2 { 2157 | margin-left: 0.5rem !important; 2158 | } 2159 | 2160 | .m-3 { 2161 | margin: 1rem !important; 2162 | } 2163 | 2164 | .mt-3, 2165 | .my-3 { 2166 | margin-top: 1rem !important; 2167 | } 2168 | 2169 | .mr-3, 2170 | .mx-3 { 2171 | margin-right: 1rem !important; 2172 | } 2173 | 2174 | .mb-3, 2175 | .my-3 { 2176 | margin-bottom: 1rem !important; 2177 | } 2178 | 2179 | .ml-3, 2180 | .mx-3 { 2181 | margin-left: 1rem !important; 2182 | } 2183 | 2184 | .m-4 { 2185 | margin: 1.5rem !important; 2186 | } 2187 | 2188 | .mt-4, 2189 | .my-4 { 2190 | margin-top: 1.5rem !important; 2191 | } 2192 | 2193 | .mr-4, 2194 | .mx-4 { 2195 | margin-right: 1.5rem !important; 2196 | } 2197 | 2198 | .mb-4, 2199 | .my-4 { 2200 | margin-bottom: 1.5rem !important; 2201 | } 2202 | 2203 | .ml-4, 2204 | .mx-4 { 2205 | margin-left: 1.5rem !important; 2206 | } 2207 | 2208 | .m-5 { 2209 | margin: 3rem !important; 2210 | } 2211 | 2212 | .mt-5, 2213 | .my-5 { 2214 | margin-top: 3rem !important; 2215 | } 2216 | 2217 | .mr-5, 2218 | .mx-5 { 2219 | margin-right: 3rem !important; 2220 | } 2221 | 2222 | .mb-5, 2223 | .my-5 { 2224 | margin-bottom: 3rem !important; 2225 | } 2226 | 2227 | .ml-5, 2228 | .mx-5 { 2229 | margin-left: 3rem !important; 2230 | } 2231 | 2232 | .p-0 { 2233 | padding: 0 !important; 2234 | } 2235 | 2236 | .pt-0, 2237 | .py-0 { 2238 | padding-top: 0 !important; 2239 | } 2240 | 2241 | .pr-0, 2242 | .px-0 { 2243 | padding-right: 0 !important; 2244 | } 2245 | 2246 | .pb-0, 2247 | .py-0 { 2248 | padding-bottom: 0 !important; 2249 | } 2250 | 2251 | .pl-0, 2252 | .px-0 { 2253 | padding-left: 0 !important; 2254 | } 2255 | 2256 | .p-1 { 2257 | padding: 0.25rem !important; 2258 | } 2259 | 2260 | .pt-1, 2261 | .py-1 { 2262 | padding-top: 0.25rem !important; 2263 | } 2264 | 2265 | .pr-1, 2266 | .px-1 { 2267 | padding-right: 0.25rem !important; 2268 | } 2269 | 2270 | .pb-1, 2271 | .py-1 { 2272 | padding-bottom: 0.25rem !important; 2273 | } 2274 | 2275 | .pl-1, 2276 | .px-1 { 2277 | padding-left: 0.25rem !important; 2278 | } 2279 | 2280 | .p-2 { 2281 | padding: 0.5rem !important; 2282 | } 2283 | 2284 | .pt-2, 2285 | .py-2 { 2286 | padding-top: 0.5rem !important; 2287 | } 2288 | 2289 | .pr-2, 2290 | .px-2 { 2291 | padding-right: 0.5rem !important; 2292 | } 2293 | 2294 | .pb-2, 2295 | .py-2 { 2296 | padding-bottom: 0.5rem !important; 2297 | } 2298 | 2299 | .pl-2, 2300 | .px-2 { 2301 | padding-left: 0.5rem !important; 2302 | } 2303 | 2304 | .p-3 { 2305 | padding: 1rem !important; 2306 | } 2307 | 2308 | .pt-3, 2309 | .py-3 { 2310 | padding-top: 1rem !important; 2311 | } 2312 | 2313 | .pr-3, 2314 | .px-3 { 2315 | padding-right: 1rem !important; 2316 | } 2317 | 2318 | .pb-3, 2319 | .py-3 { 2320 | padding-bottom: 1rem !important; 2321 | } 2322 | 2323 | .pl-3, 2324 | .px-3 { 2325 | padding-left: 1rem !important; 2326 | } 2327 | 2328 | .p-4 { 2329 | padding: 1.5rem !important; 2330 | } 2331 | 2332 | .pt-4, 2333 | .py-4 { 2334 | padding-top: 1.5rem !important; 2335 | } 2336 | 2337 | .pr-4, 2338 | .px-4 { 2339 | padding-right: 1.5rem !important; 2340 | } 2341 | 2342 | .pb-4, 2343 | .py-4 { 2344 | padding-bottom: 1.5rem !important; 2345 | } 2346 | 2347 | .pl-4, 2348 | .px-4 { 2349 | padding-left: 1.5rem !important; 2350 | } 2351 | 2352 | .p-5 { 2353 | padding: 3rem !important; 2354 | } 2355 | 2356 | .pt-5, 2357 | .py-5 { 2358 | padding-top: 3rem !important; 2359 | } 2360 | 2361 | .pr-5, 2362 | .px-5 { 2363 | padding-right: 3rem !important; 2364 | } 2365 | 2366 | .pb-5, 2367 | .py-5 { 2368 | padding-bottom: 3rem !important; 2369 | } 2370 | 2371 | .pl-5, 2372 | .px-5 { 2373 | padding-left: 3rem !important; 2374 | } 2375 | 2376 | .m-n1 { 2377 | margin: -0.25rem !important; 2378 | } 2379 | 2380 | .mt-n1, 2381 | .my-n1 { 2382 | margin-top: -0.25rem !important; 2383 | } 2384 | 2385 | .mr-n1, 2386 | .mx-n1 { 2387 | margin-right: -0.25rem !important; 2388 | } 2389 | 2390 | .mb-n1, 2391 | .my-n1 { 2392 | margin-bottom: -0.25rem !important; 2393 | } 2394 | 2395 | .ml-n1, 2396 | .mx-n1 { 2397 | margin-left: -0.25rem !important; 2398 | } 2399 | 2400 | .m-n2 { 2401 | margin: -0.5rem !important; 2402 | } 2403 | 2404 | .mt-n2, 2405 | .my-n2 { 2406 | margin-top: -0.5rem !important; 2407 | } 2408 | 2409 | .mr-n2, 2410 | .mx-n2 { 2411 | margin-right: -0.5rem !important; 2412 | } 2413 | 2414 | .mb-n2, 2415 | .my-n2 { 2416 | margin-bottom: -0.5rem !important; 2417 | } 2418 | 2419 | .ml-n2, 2420 | .mx-n2 { 2421 | margin-left: -0.5rem !important; 2422 | } 2423 | 2424 | .m-n3 { 2425 | margin: -1rem !important; 2426 | } 2427 | 2428 | .mt-n3, 2429 | .my-n3 { 2430 | margin-top: -1rem !important; 2431 | } 2432 | 2433 | .mr-n3, 2434 | .mx-n3 { 2435 | margin-right: -1rem !important; 2436 | } 2437 | 2438 | .mb-n3, 2439 | .my-n3 { 2440 | margin-bottom: -1rem !important; 2441 | } 2442 | 2443 | .ml-n3, 2444 | .mx-n3 { 2445 | margin-left: -1rem !important; 2446 | } 2447 | 2448 | .m-n4 { 2449 | margin: -1.5rem !important; 2450 | } 2451 | 2452 | .mt-n4, 2453 | .my-n4 { 2454 | margin-top: -1.5rem !important; 2455 | } 2456 | 2457 | .mr-n4, 2458 | .mx-n4 { 2459 | margin-right: -1.5rem !important; 2460 | } 2461 | 2462 | .mb-n4, 2463 | .my-n4 { 2464 | margin-bottom: -1.5rem !important; 2465 | } 2466 | 2467 | .ml-n4, 2468 | .mx-n4 { 2469 | margin-left: -1.5rem !important; 2470 | } 2471 | 2472 | .m-n5 { 2473 | margin: -3rem !important; 2474 | } 2475 | 2476 | .mt-n5, 2477 | .my-n5 { 2478 | margin-top: -3rem !important; 2479 | } 2480 | 2481 | .mr-n5, 2482 | .mx-n5 { 2483 | margin-right: -3rem !important; 2484 | } 2485 | 2486 | .mb-n5, 2487 | .my-n5 { 2488 | margin-bottom: -3rem !important; 2489 | } 2490 | 2491 | .ml-n5, 2492 | .mx-n5 { 2493 | margin-left: -3rem !important; 2494 | } 2495 | 2496 | .m-auto { 2497 | margin: auto !important; 2498 | } 2499 | 2500 | .mt-auto, 2501 | .my-auto { 2502 | margin-top: auto !important; 2503 | } 2504 | 2505 | .mr-auto, 2506 | .mx-auto { 2507 | margin-right: auto !important; 2508 | } 2509 | 2510 | .mb-auto, 2511 | .my-auto { 2512 | margin-bottom: auto !important; 2513 | } 2514 | 2515 | .ml-auto, 2516 | .mx-auto { 2517 | margin-left: auto !important; 2518 | } 2519 | 2520 | @media (min-width: 576px) { 2521 | .m-sm-0 { 2522 | margin: 0 !important; 2523 | } 2524 | .mt-sm-0, 2525 | .my-sm-0 { 2526 | margin-top: 0 !important; 2527 | } 2528 | .mr-sm-0, 2529 | .mx-sm-0 { 2530 | margin-right: 0 !important; 2531 | } 2532 | .mb-sm-0, 2533 | .my-sm-0 { 2534 | margin-bottom: 0 !important; 2535 | } 2536 | .ml-sm-0, 2537 | .mx-sm-0 { 2538 | margin-left: 0 !important; 2539 | } 2540 | .m-sm-1 { 2541 | margin: 0.25rem !important; 2542 | } 2543 | .mt-sm-1, 2544 | .my-sm-1 { 2545 | margin-top: 0.25rem !important; 2546 | } 2547 | .mr-sm-1, 2548 | .mx-sm-1 { 2549 | margin-right: 0.25rem !important; 2550 | } 2551 | .mb-sm-1, 2552 | .my-sm-1 { 2553 | margin-bottom: 0.25rem !important; 2554 | } 2555 | .ml-sm-1, 2556 | .mx-sm-1 { 2557 | margin-left: 0.25rem !important; 2558 | } 2559 | .m-sm-2 { 2560 | margin: 0.5rem !important; 2561 | } 2562 | .mt-sm-2, 2563 | .my-sm-2 { 2564 | margin-top: 0.5rem !important; 2565 | } 2566 | .mr-sm-2, 2567 | .mx-sm-2 { 2568 | margin-right: 0.5rem !important; 2569 | } 2570 | .mb-sm-2, 2571 | .my-sm-2 { 2572 | margin-bottom: 0.5rem !important; 2573 | } 2574 | .ml-sm-2, 2575 | .mx-sm-2 { 2576 | margin-left: 0.5rem !important; 2577 | } 2578 | .m-sm-3 { 2579 | margin: 1rem !important; 2580 | } 2581 | .mt-sm-3, 2582 | .my-sm-3 { 2583 | margin-top: 1rem !important; 2584 | } 2585 | .mr-sm-3, 2586 | .mx-sm-3 { 2587 | margin-right: 1rem !important; 2588 | } 2589 | .mb-sm-3, 2590 | .my-sm-3 { 2591 | margin-bottom: 1rem !important; 2592 | } 2593 | .ml-sm-3, 2594 | .mx-sm-3 { 2595 | margin-left: 1rem !important; 2596 | } 2597 | .m-sm-4 { 2598 | margin: 1.5rem !important; 2599 | } 2600 | .mt-sm-4, 2601 | .my-sm-4 { 2602 | margin-top: 1.5rem !important; 2603 | } 2604 | .mr-sm-4, 2605 | .mx-sm-4 { 2606 | margin-right: 1.5rem !important; 2607 | } 2608 | .mb-sm-4, 2609 | .my-sm-4 { 2610 | margin-bottom: 1.5rem !important; 2611 | } 2612 | .ml-sm-4, 2613 | .mx-sm-4 { 2614 | margin-left: 1.5rem !important; 2615 | } 2616 | .m-sm-5 { 2617 | margin: 3rem !important; 2618 | } 2619 | .mt-sm-5, 2620 | .my-sm-5 { 2621 | margin-top: 3rem !important; 2622 | } 2623 | .mr-sm-5, 2624 | .mx-sm-5 { 2625 | margin-right: 3rem !important; 2626 | } 2627 | .mb-sm-5, 2628 | .my-sm-5 { 2629 | margin-bottom: 3rem !important; 2630 | } 2631 | .ml-sm-5, 2632 | .mx-sm-5 { 2633 | margin-left: 3rem !important; 2634 | } 2635 | .p-sm-0 { 2636 | padding: 0 !important; 2637 | } 2638 | .pt-sm-0, 2639 | .py-sm-0 { 2640 | padding-top: 0 !important; 2641 | } 2642 | .pr-sm-0, 2643 | .px-sm-0 { 2644 | padding-right: 0 !important; 2645 | } 2646 | .pb-sm-0, 2647 | .py-sm-0 { 2648 | padding-bottom: 0 !important; 2649 | } 2650 | .pl-sm-0, 2651 | .px-sm-0 { 2652 | padding-left: 0 !important; 2653 | } 2654 | .p-sm-1 { 2655 | padding: 0.25rem !important; 2656 | } 2657 | .pt-sm-1, 2658 | .py-sm-1 { 2659 | padding-top: 0.25rem !important; 2660 | } 2661 | .pr-sm-1, 2662 | .px-sm-1 { 2663 | padding-right: 0.25rem !important; 2664 | } 2665 | .pb-sm-1, 2666 | .py-sm-1 { 2667 | padding-bottom: 0.25rem !important; 2668 | } 2669 | .pl-sm-1, 2670 | .px-sm-1 { 2671 | padding-left: 0.25rem !important; 2672 | } 2673 | .p-sm-2 { 2674 | padding: 0.5rem !important; 2675 | } 2676 | .pt-sm-2, 2677 | .py-sm-2 { 2678 | padding-top: 0.5rem !important; 2679 | } 2680 | .pr-sm-2, 2681 | .px-sm-2 { 2682 | padding-right: 0.5rem !important; 2683 | } 2684 | .pb-sm-2, 2685 | .py-sm-2 { 2686 | padding-bottom: 0.5rem !important; 2687 | } 2688 | .pl-sm-2, 2689 | .px-sm-2 { 2690 | padding-left: 0.5rem !important; 2691 | } 2692 | .p-sm-3 { 2693 | padding: 1rem !important; 2694 | } 2695 | .pt-sm-3, 2696 | .py-sm-3 { 2697 | padding-top: 1rem !important; 2698 | } 2699 | .pr-sm-3, 2700 | .px-sm-3 { 2701 | padding-right: 1rem !important; 2702 | } 2703 | .pb-sm-3, 2704 | .py-sm-3 { 2705 | padding-bottom: 1rem !important; 2706 | } 2707 | .pl-sm-3, 2708 | .px-sm-3 { 2709 | padding-left: 1rem !important; 2710 | } 2711 | .p-sm-4 { 2712 | padding: 1.5rem !important; 2713 | } 2714 | .pt-sm-4, 2715 | .py-sm-4 { 2716 | padding-top: 1.5rem !important; 2717 | } 2718 | .pr-sm-4, 2719 | .px-sm-4 { 2720 | padding-right: 1.5rem !important; 2721 | } 2722 | .pb-sm-4, 2723 | .py-sm-4 { 2724 | padding-bottom: 1.5rem !important; 2725 | } 2726 | .pl-sm-4, 2727 | .px-sm-4 { 2728 | padding-left: 1.5rem !important; 2729 | } 2730 | .p-sm-5 { 2731 | padding: 3rem !important; 2732 | } 2733 | .pt-sm-5, 2734 | .py-sm-5 { 2735 | padding-top: 3rem !important; 2736 | } 2737 | .pr-sm-5, 2738 | .px-sm-5 { 2739 | padding-right: 3rem !important; 2740 | } 2741 | .pb-sm-5, 2742 | .py-sm-5 { 2743 | padding-bottom: 3rem !important; 2744 | } 2745 | .pl-sm-5, 2746 | .px-sm-5 { 2747 | padding-left: 3rem !important; 2748 | } 2749 | .m-sm-n1 { 2750 | margin: -0.25rem !important; 2751 | } 2752 | .mt-sm-n1, 2753 | .my-sm-n1 { 2754 | margin-top: -0.25rem !important; 2755 | } 2756 | .mr-sm-n1, 2757 | .mx-sm-n1 { 2758 | margin-right: -0.25rem !important; 2759 | } 2760 | .mb-sm-n1, 2761 | .my-sm-n1 { 2762 | margin-bottom: -0.25rem !important; 2763 | } 2764 | .ml-sm-n1, 2765 | .mx-sm-n1 { 2766 | margin-left: -0.25rem !important; 2767 | } 2768 | .m-sm-n2 { 2769 | margin: -0.5rem !important; 2770 | } 2771 | .mt-sm-n2, 2772 | .my-sm-n2 { 2773 | margin-top: -0.5rem !important; 2774 | } 2775 | .mr-sm-n2, 2776 | .mx-sm-n2 { 2777 | margin-right: -0.5rem !important; 2778 | } 2779 | .mb-sm-n2, 2780 | .my-sm-n2 { 2781 | margin-bottom: -0.5rem !important; 2782 | } 2783 | .ml-sm-n2, 2784 | .mx-sm-n2 { 2785 | margin-left: -0.5rem !important; 2786 | } 2787 | .m-sm-n3 { 2788 | margin: -1rem !important; 2789 | } 2790 | .mt-sm-n3, 2791 | .my-sm-n3 { 2792 | margin-top: -1rem !important; 2793 | } 2794 | .mr-sm-n3, 2795 | .mx-sm-n3 { 2796 | margin-right: -1rem !important; 2797 | } 2798 | .mb-sm-n3, 2799 | .my-sm-n3 { 2800 | margin-bottom: -1rem !important; 2801 | } 2802 | .ml-sm-n3, 2803 | .mx-sm-n3 { 2804 | margin-left: -1rem !important; 2805 | } 2806 | .m-sm-n4 { 2807 | margin: -1.5rem !important; 2808 | } 2809 | .mt-sm-n4, 2810 | .my-sm-n4 { 2811 | margin-top: -1.5rem !important; 2812 | } 2813 | .mr-sm-n4, 2814 | .mx-sm-n4 { 2815 | margin-right: -1.5rem !important; 2816 | } 2817 | .mb-sm-n4, 2818 | .my-sm-n4 { 2819 | margin-bottom: -1.5rem !important; 2820 | } 2821 | .ml-sm-n4, 2822 | .mx-sm-n4 { 2823 | margin-left: -1.5rem !important; 2824 | } 2825 | .m-sm-n5 { 2826 | margin: -3rem !important; 2827 | } 2828 | .mt-sm-n5, 2829 | .my-sm-n5 { 2830 | margin-top: -3rem !important; 2831 | } 2832 | .mr-sm-n5, 2833 | .mx-sm-n5 { 2834 | margin-right: -3rem !important; 2835 | } 2836 | .mb-sm-n5, 2837 | .my-sm-n5 { 2838 | margin-bottom: -3rem !important; 2839 | } 2840 | .ml-sm-n5, 2841 | .mx-sm-n5 { 2842 | margin-left: -3rem !important; 2843 | } 2844 | .m-sm-auto { 2845 | margin: auto !important; 2846 | } 2847 | .mt-sm-auto, 2848 | .my-sm-auto { 2849 | margin-top: auto !important; 2850 | } 2851 | .mr-sm-auto, 2852 | .mx-sm-auto { 2853 | margin-right: auto !important; 2854 | } 2855 | .mb-sm-auto, 2856 | .my-sm-auto { 2857 | margin-bottom: auto !important; 2858 | } 2859 | .ml-sm-auto, 2860 | .mx-sm-auto { 2861 | margin-left: auto !important; 2862 | } 2863 | } 2864 | 2865 | @media (min-width: 768px) { 2866 | .m-md-0 { 2867 | margin: 0 !important; 2868 | } 2869 | .mt-md-0, 2870 | .my-md-0 { 2871 | margin-top: 0 !important; 2872 | } 2873 | .mr-md-0, 2874 | .mx-md-0 { 2875 | margin-right: 0 !important; 2876 | } 2877 | .mb-md-0, 2878 | .my-md-0 { 2879 | margin-bottom: 0 !important; 2880 | } 2881 | .ml-md-0, 2882 | .mx-md-0 { 2883 | margin-left: 0 !important; 2884 | } 2885 | .m-md-1 { 2886 | margin: 0.25rem !important; 2887 | } 2888 | .mt-md-1, 2889 | .my-md-1 { 2890 | margin-top: 0.25rem !important; 2891 | } 2892 | .mr-md-1, 2893 | .mx-md-1 { 2894 | margin-right: 0.25rem !important; 2895 | } 2896 | .mb-md-1, 2897 | .my-md-1 { 2898 | margin-bottom: 0.25rem !important; 2899 | } 2900 | .ml-md-1, 2901 | .mx-md-1 { 2902 | margin-left: 0.25rem !important; 2903 | } 2904 | .m-md-2 { 2905 | margin: 0.5rem !important; 2906 | } 2907 | .mt-md-2, 2908 | .my-md-2 { 2909 | margin-top: 0.5rem !important; 2910 | } 2911 | .mr-md-2, 2912 | .mx-md-2 { 2913 | margin-right: 0.5rem !important; 2914 | } 2915 | .mb-md-2, 2916 | .my-md-2 { 2917 | margin-bottom: 0.5rem !important; 2918 | } 2919 | .ml-md-2, 2920 | .mx-md-2 { 2921 | margin-left: 0.5rem !important; 2922 | } 2923 | .m-md-3 { 2924 | margin: 1rem !important; 2925 | } 2926 | .mt-md-3, 2927 | .my-md-3 { 2928 | margin-top: 1rem !important; 2929 | } 2930 | .mr-md-3, 2931 | .mx-md-3 { 2932 | margin-right: 1rem !important; 2933 | } 2934 | .mb-md-3, 2935 | .my-md-3 { 2936 | margin-bottom: 1rem !important; 2937 | } 2938 | .ml-md-3, 2939 | .mx-md-3 { 2940 | margin-left: 1rem !important; 2941 | } 2942 | .m-md-4 { 2943 | margin: 1.5rem !important; 2944 | } 2945 | .mt-md-4, 2946 | .my-md-4 { 2947 | margin-top: 1.5rem !important; 2948 | } 2949 | .mr-md-4, 2950 | .mx-md-4 { 2951 | margin-right: 1.5rem !important; 2952 | } 2953 | .mb-md-4, 2954 | .my-md-4 { 2955 | margin-bottom: 1.5rem !important; 2956 | } 2957 | .ml-md-4, 2958 | .mx-md-4 { 2959 | margin-left: 1.5rem !important; 2960 | } 2961 | .m-md-5 { 2962 | margin: 3rem !important; 2963 | } 2964 | .mt-md-5, 2965 | .my-md-5 { 2966 | margin-top: 3rem !important; 2967 | } 2968 | .mr-md-5, 2969 | .mx-md-5 { 2970 | margin-right: 3rem !important; 2971 | } 2972 | .mb-md-5, 2973 | .my-md-5 { 2974 | margin-bottom: 3rem !important; 2975 | } 2976 | .ml-md-5, 2977 | .mx-md-5 { 2978 | margin-left: 3rem !important; 2979 | } 2980 | .p-md-0 { 2981 | padding: 0 !important; 2982 | } 2983 | .pt-md-0, 2984 | .py-md-0 { 2985 | padding-top: 0 !important; 2986 | } 2987 | .pr-md-0, 2988 | .px-md-0 { 2989 | padding-right: 0 !important; 2990 | } 2991 | .pb-md-0, 2992 | .py-md-0 { 2993 | padding-bottom: 0 !important; 2994 | } 2995 | .pl-md-0, 2996 | .px-md-0 { 2997 | padding-left: 0 !important; 2998 | } 2999 | .p-md-1 { 3000 | padding: 0.25rem !important; 3001 | } 3002 | .pt-md-1, 3003 | .py-md-1 { 3004 | padding-top: 0.25rem !important; 3005 | } 3006 | .pr-md-1, 3007 | .px-md-1 { 3008 | padding-right: 0.25rem !important; 3009 | } 3010 | .pb-md-1, 3011 | .py-md-1 { 3012 | padding-bottom: 0.25rem !important; 3013 | } 3014 | .pl-md-1, 3015 | .px-md-1 { 3016 | padding-left: 0.25rem !important; 3017 | } 3018 | .p-md-2 { 3019 | padding: 0.5rem !important; 3020 | } 3021 | .pt-md-2, 3022 | .py-md-2 { 3023 | padding-top: 0.5rem !important; 3024 | } 3025 | .pr-md-2, 3026 | .px-md-2 { 3027 | padding-right: 0.5rem !important; 3028 | } 3029 | .pb-md-2, 3030 | .py-md-2 { 3031 | padding-bottom: 0.5rem !important; 3032 | } 3033 | .pl-md-2, 3034 | .px-md-2 { 3035 | padding-left: 0.5rem !important; 3036 | } 3037 | .p-md-3 { 3038 | padding: 1rem !important; 3039 | } 3040 | .pt-md-3, 3041 | .py-md-3 { 3042 | padding-top: 1rem !important; 3043 | } 3044 | .pr-md-3, 3045 | .px-md-3 { 3046 | padding-right: 1rem !important; 3047 | } 3048 | .pb-md-3, 3049 | .py-md-3 { 3050 | padding-bottom: 1rem !important; 3051 | } 3052 | .pl-md-3, 3053 | .px-md-3 { 3054 | padding-left: 1rem !important; 3055 | } 3056 | .p-md-4 { 3057 | padding: 1.5rem !important; 3058 | } 3059 | .pt-md-4, 3060 | .py-md-4 { 3061 | padding-top: 1.5rem !important; 3062 | } 3063 | .pr-md-4, 3064 | .px-md-4 { 3065 | padding-right: 1.5rem !important; 3066 | } 3067 | .pb-md-4, 3068 | .py-md-4 { 3069 | padding-bottom: 1.5rem !important; 3070 | } 3071 | .pl-md-4, 3072 | .px-md-4 { 3073 | padding-left: 1.5rem !important; 3074 | } 3075 | .p-md-5 { 3076 | padding: 3rem !important; 3077 | } 3078 | .pt-md-5, 3079 | .py-md-5 { 3080 | padding-top: 3rem !important; 3081 | } 3082 | .pr-md-5, 3083 | .px-md-5 { 3084 | padding-right: 3rem !important; 3085 | } 3086 | .pb-md-5, 3087 | .py-md-5 { 3088 | padding-bottom: 3rem !important; 3089 | } 3090 | .pl-md-5, 3091 | .px-md-5 { 3092 | padding-left: 3rem !important; 3093 | } 3094 | .m-md-n1 { 3095 | margin: -0.25rem !important; 3096 | } 3097 | .mt-md-n1, 3098 | .my-md-n1 { 3099 | margin-top: -0.25rem !important; 3100 | } 3101 | .mr-md-n1, 3102 | .mx-md-n1 { 3103 | margin-right: -0.25rem !important; 3104 | } 3105 | .mb-md-n1, 3106 | .my-md-n1 { 3107 | margin-bottom: -0.25rem !important; 3108 | } 3109 | .ml-md-n1, 3110 | .mx-md-n1 { 3111 | margin-left: -0.25rem !important; 3112 | } 3113 | .m-md-n2 { 3114 | margin: -0.5rem !important; 3115 | } 3116 | .mt-md-n2, 3117 | .my-md-n2 { 3118 | margin-top: -0.5rem !important; 3119 | } 3120 | .mr-md-n2, 3121 | .mx-md-n2 { 3122 | margin-right: -0.5rem !important; 3123 | } 3124 | .mb-md-n2, 3125 | .my-md-n2 { 3126 | margin-bottom: -0.5rem !important; 3127 | } 3128 | .ml-md-n2, 3129 | .mx-md-n2 { 3130 | margin-left: -0.5rem !important; 3131 | } 3132 | .m-md-n3 { 3133 | margin: -1rem !important; 3134 | } 3135 | .mt-md-n3, 3136 | .my-md-n3 { 3137 | margin-top: -1rem !important; 3138 | } 3139 | .mr-md-n3, 3140 | .mx-md-n3 { 3141 | margin-right: -1rem !important; 3142 | } 3143 | .mb-md-n3, 3144 | .my-md-n3 { 3145 | margin-bottom: -1rem !important; 3146 | } 3147 | .ml-md-n3, 3148 | .mx-md-n3 { 3149 | margin-left: -1rem !important; 3150 | } 3151 | .m-md-n4 { 3152 | margin: -1.5rem !important; 3153 | } 3154 | .mt-md-n4, 3155 | .my-md-n4 { 3156 | margin-top: -1.5rem !important; 3157 | } 3158 | .mr-md-n4, 3159 | .mx-md-n4 { 3160 | margin-right: -1.5rem !important; 3161 | } 3162 | .mb-md-n4, 3163 | .my-md-n4 { 3164 | margin-bottom: -1.5rem !important; 3165 | } 3166 | .ml-md-n4, 3167 | .mx-md-n4 { 3168 | margin-left: -1.5rem !important; 3169 | } 3170 | .m-md-n5 { 3171 | margin: -3rem !important; 3172 | } 3173 | .mt-md-n5, 3174 | .my-md-n5 { 3175 | margin-top: -3rem !important; 3176 | } 3177 | .mr-md-n5, 3178 | .mx-md-n5 { 3179 | margin-right: -3rem !important; 3180 | } 3181 | .mb-md-n5, 3182 | .my-md-n5 { 3183 | margin-bottom: -3rem !important; 3184 | } 3185 | .ml-md-n5, 3186 | .mx-md-n5 { 3187 | margin-left: -3rem !important; 3188 | } 3189 | .m-md-auto { 3190 | margin: auto !important; 3191 | } 3192 | .mt-md-auto, 3193 | .my-md-auto { 3194 | margin-top: auto !important; 3195 | } 3196 | .mr-md-auto, 3197 | .mx-md-auto { 3198 | margin-right: auto !important; 3199 | } 3200 | .mb-md-auto, 3201 | .my-md-auto { 3202 | margin-bottom: auto !important; 3203 | } 3204 | .ml-md-auto, 3205 | .mx-md-auto { 3206 | margin-left: auto !important; 3207 | } 3208 | } 3209 | 3210 | @media (min-width: 992px) { 3211 | .m-lg-0 { 3212 | margin: 0 !important; 3213 | } 3214 | .mt-lg-0, 3215 | .my-lg-0 { 3216 | margin-top: 0 !important; 3217 | } 3218 | .mr-lg-0, 3219 | .mx-lg-0 { 3220 | margin-right: 0 !important; 3221 | } 3222 | .mb-lg-0, 3223 | .my-lg-0 { 3224 | margin-bottom: 0 !important; 3225 | } 3226 | .ml-lg-0, 3227 | .mx-lg-0 { 3228 | margin-left: 0 !important; 3229 | } 3230 | .m-lg-1 { 3231 | margin: 0.25rem !important; 3232 | } 3233 | .mt-lg-1, 3234 | .my-lg-1 { 3235 | margin-top: 0.25rem !important; 3236 | } 3237 | .mr-lg-1, 3238 | .mx-lg-1 { 3239 | margin-right: 0.25rem !important; 3240 | } 3241 | .mb-lg-1, 3242 | .my-lg-1 { 3243 | margin-bottom: 0.25rem !important; 3244 | } 3245 | .ml-lg-1, 3246 | .mx-lg-1 { 3247 | margin-left: 0.25rem !important; 3248 | } 3249 | .m-lg-2 { 3250 | margin: 0.5rem !important; 3251 | } 3252 | .mt-lg-2, 3253 | .my-lg-2 { 3254 | margin-top: 0.5rem !important; 3255 | } 3256 | .mr-lg-2, 3257 | .mx-lg-2 { 3258 | margin-right: 0.5rem !important; 3259 | } 3260 | .mb-lg-2, 3261 | .my-lg-2 { 3262 | margin-bottom: 0.5rem !important; 3263 | } 3264 | .ml-lg-2, 3265 | .mx-lg-2 { 3266 | margin-left: 0.5rem !important; 3267 | } 3268 | .m-lg-3 { 3269 | margin: 1rem !important; 3270 | } 3271 | .mt-lg-3, 3272 | .my-lg-3 { 3273 | margin-top: 1rem !important; 3274 | } 3275 | .mr-lg-3, 3276 | .mx-lg-3 { 3277 | margin-right: 1rem !important; 3278 | } 3279 | .mb-lg-3, 3280 | .my-lg-3 { 3281 | margin-bottom: 1rem !important; 3282 | } 3283 | .ml-lg-3, 3284 | .mx-lg-3 { 3285 | margin-left: 1rem !important; 3286 | } 3287 | .m-lg-4 { 3288 | margin: 1.5rem !important; 3289 | } 3290 | .mt-lg-4, 3291 | .my-lg-4 { 3292 | margin-top: 1.5rem !important; 3293 | } 3294 | .mr-lg-4, 3295 | .mx-lg-4 { 3296 | margin-right: 1.5rem !important; 3297 | } 3298 | .mb-lg-4, 3299 | .my-lg-4 { 3300 | margin-bottom: 1.5rem !important; 3301 | } 3302 | .ml-lg-4, 3303 | .mx-lg-4 { 3304 | margin-left: 1.5rem !important; 3305 | } 3306 | .m-lg-5 { 3307 | margin: 3rem !important; 3308 | } 3309 | .mt-lg-5, 3310 | .my-lg-5 { 3311 | margin-top: 3rem !important; 3312 | } 3313 | .mr-lg-5, 3314 | .mx-lg-5 { 3315 | margin-right: 3rem !important; 3316 | } 3317 | .mb-lg-5, 3318 | .my-lg-5 { 3319 | margin-bottom: 3rem !important; 3320 | } 3321 | .ml-lg-5, 3322 | .mx-lg-5 { 3323 | margin-left: 3rem !important; 3324 | } 3325 | .p-lg-0 { 3326 | padding: 0 !important; 3327 | } 3328 | .pt-lg-0, 3329 | .py-lg-0 { 3330 | padding-top: 0 !important; 3331 | } 3332 | .pr-lg-0, 3333 | .px-lg-0 { 3334 | padding-right: 0 !important; 3335 | } 3336 | .pb-lg-0, 3337 | .py-lg-0 { 3338 | padding-bottom: 0 !important; 3339 | } 3340 | .pl-lg-0, 3341 | .px-lg-0 { 3342 | padding-left: 0 !important; 3343 | } 3344 | .p-lg-1 { 3345 | padding: 0.25rem !important; 3346 | } 3347 | .pt-lg-1, 3348 | .py-lg-1 { 3349 | padding-top: 0.25rem !important; 3350 | } 3351 | .pr-lg-1, 3352 | .px-lg-1 { 3353 | padding-right: 0.25rem !important; 3354 | } 3355 | .pb-lg-1, 3356 | .py-lg-1 { 3357 | padding-bottom: 0.25rem !important; 3358 | } 3359 | .pl-lg-1, 3360 | .px-lg-1 { 3361 | padding-left: 0.25rem !important; 3362 | } 3363 | .p-lg-2 { 3364 | padding: 0.5rem !important; 3365 | } 3366 | .pt-lg-2, 3367 | .py-lg-2 { 3368 | padding-top: 0.5rem !important; 3369 | } 3370 | .pr-lg-2, 3371 | .px-lg-2 { 3372 | padding-right: 0.5rem !important; 3373 | } 3374 | .pb-lg-2, 3375 | .py-lg-2 { 3376 | padding-bottom: 0.5rem !important; 3377 | } 3378 | .pl-lg-2, 3379 | .px-lg-2 { 3380 | padding-left: 0.5rem !important; 3381 | } 3382 | .p-lg-3 { 3383 | padding: 1rem !important; 3384 | } 3385 | .pt-lg-3, 3386 | .py-lg-3 { 3387 | padding-top: 1rem !important; 3388 | } 3389 | .pr-lg-3, 3390 | .px-lg-3 { 3391 | padding-right: 1rem !important; 3392 | } 3393 | .pb-lg-3, 3394 | .py-lg-3 { 3395 | padding-bottom: 1rem !important; 3396 | } 3397 | .pl-lg-3, 3398 | .px-lg-3 { 3399 | padding-left: 1rem !important; 3400 | } 3401 | .p-lg-4 { 3402 | padding: 1.5rem !important; 3403 | } 3404 | .pt-lg-4, 3405 | .py-lg-4 { 3406 | padding-top: 1.5rem !important; 3407 | } 3408 | .pr-lg-4, 3409 | .px-lg-4 { 3410 | padding-right: 1.5rem !important; 3411 | } 3412 | .pb-lg-4, 3413 | .py-lg-4 { 3414 | padding-bottom: 1.5rem !important; 3415 | } 3416 | .pl-lg-4, 3417 | .px-lg-4 { 3418 | padding-left: 1.5rem !important; 3419 | } 3420 | .p-lg-5 { 3421 | padding: 3rem !important; 3422 | } 3423 | .pt-lg-5, 3424 | .py-lg-5 { 3425 | padding-top: 3rem !important; 3426 | } 3427 | .pr-lg-5, 3428 | .px-lg-5 { 3429 | padding-right: 3rem !important; 3430 | } 3431 | .pb-lg-5, 3432 | .py-lg-5 { 3433 | padding-bottom: 3rem !important; 3434 | } 3435 | .pl-lg-5, 3436 | .px-lg-5 { 3437 | padding-left: 3rem !important; 3438 | } 3439 | .m-lg-n1 { 3440 | margin: -0.25rem !important; 3441 | } 3442 | .mt-lg-n1, 3443 | .my-lg-n1 { 3444 | margin-top: -0.25rem !important; 3445 | } 3446 | .mr-lg-n1, 3447 | .mx-lg-n1 { 3448 | margin-right: -0.25rem !important; 3449 | } 3450 | .mb-lg-n1, 3451 | .my-lg-n1 { 3452 | margin-bottom: -0.25rem !important; 3453 | } 3454 | .ml-lg-n1, 3455 | .mx-lg-n1 { 3456 | margin-left: -0.25rem !important; 3457 | } 3458 | .m-lg-n2 { 3459 | margin: -0.5rem !important; 3460 | } 3461 | .mt-lg-n2, 3462 | .my-lg-n2 { 3463 | margin-top: -0.5rem !important; 3464 | } 3465 | .mr-lg-n2, 3466 | .mx-lg-n2 { 3467 | margin-right: -0.5rem !important; 3468 | } 3469 | .mb-lg-n2, 3470 | .my-lg-n2 { 3471 | margin-bottom: -0.5rem !important; 3472 | } 3473 | .ml-lg-n2, 3474 | .mx-lg-n2 { 3475 | margin-left: -0.5rem !important; 3476 | } 3477 | .m-lg-n3 { 3478 | margin: -1rem !important; 3479 | } 3480 | .mt-lg-n3, 3481 | .my-lg-n3 { 3482 | margin-top: -1rem !important; 3483 | } 3484 | .mr-lg-n3, 3485 | .mx-lg-n3 { 3486 | margin-right: -1rem !important; 3487 | } 3488 | .mb-lg-n3, 3489 | .my-lg-n3 { 3490 | margin-bottom: -1rem !important; 3491 | } 3492 | .ml-lg-n3, 3493 | .mx-lg-n3 { 3494 | margin-left: -1rem !important; 3495 | } 3496 | .m-lg-n4 { 3497 | margin: -1.5rem !important; 3498 | } 3499 | .mt-lg-n4, 3500 | .my-lg-n4 { 3501 | margin-top: -1.5rem !important; 3502 | } 3503 | .mr-lg-n4, 3504 | .mx-lg-n4 { 3505 | margin-right: -1.5rem !important; 3506 | } 3507 | .mb-lg-n4, 3508 | .my-lg-n4 { 3509 | margin-bottom: -1.5rem !important; 3510 | } 3511 | .ml-lg-n4, 3512 | .mx-lg-n4 { 3513 | margin-left: -1.5rem !important; 3514 | } 3515 | .m-lg-n5 { 3516 | margin: -3rem !important; 3517 | } 3518 | .mt-lg-n5, 3519 | .my-lg-n5 { 3520 | margin-top: -3rem !important; 3521 | } 3522 | .mr-lg-n5, 3523 | .mx-lg-n5 { 3524 | margin-right: -3rem !important; 3525 | } 3526 | .mb-lg-n5, 3527 | .my-lg-n5 { 3528 | margin-bottom: -3rem !important; 3529 | } 3530 | .ml-lg-n5, 3531 | .mx-lg-n5 { 3532 | margin-left: -3rem !important; 3533 | } 3534 | .m-lg-auto { 3535 | margin: auto !important; 3536 | } 3537 | .mt-lg-auto, 3538 | .my-lg-auto { 3539 | margin-top: auto !important; 3540 | } 3541 | .mr-lg-auto, 3542 | .mx-lg-auto { 3543 | margin-right: auto !important; 3544 | } 3545 | .mb-lg-auto, 3546 | .my-lg-auto { 3547 | margin-bottom: auto !important; 3548 | } 3549 | .ml-lg-auto, 3550 | .mx-lg-auto { 3551 | margin-left: auto !important; 3552 | } 3553 | } 3554 | 3555 | @media (min-width: 1200px) { 3556 | .m-xl-0 { 3557 | margin: 0 !important; 3558 | } 3559 | .mt-xl-0, 3560 | .my-xl-0 { 3561 | margin-top: 0 !important; 3562 | } 3563 | .mr-xl-0, 3564 | .mx-xl-0 { 3565 | margin-right: 0 !important; 3566 | } 3567 | .mb-xl-0, 3568 | .my-xl-0 { 3569 | margin-bottom: 0 !important; 3570 | } 3571 | .ml-xl-0, 3572 | .mx-xl-0 { 3573 | margin-left: 0 !important; 3574 | } 3575 | .m-xl-1 { 3576 | margin: 0.25rem !important; 3577 | } 3578 | .mt-xl-1, 3579 | .my-xl-1 { 3580 | margin-top: 0.25rem !important; 3581 | } 3582 | .mr-xl-1, 3583 | .mx-xl-1 { 3584 | margin-right: 0.25rem !important; 3585 | } 3586 | .mb-xl-1, 3587 | .my-xl-1 { 3588 | margin-bottom: 0.25rem !important; 3589 | } 3590 | .ml-xl-1, 3591 | .mx-xl-1 { 3592 | margin-left: 0.25rem !important; 3593 | } 3594 | .m-xl-2 { 3595 | margin: 0.5rem !important; 3596 | } 3597 | .mt-xl-2, 3598 | .my-xl-2 { 3599 | margin-top: 0.5rem !important; 3600 | } 3601 | .mr-xl-2, 3602 | .mx-xl-2 { 3603 | margin-right: 0.5rem !important; 3604 | } 3605 | .mb-xl-2, 3606 | .my-xl-2 { 3607 | margin-bottom: 0.5rem !important; 3608 | } 3609 | .ml-xl-2, 3610 | .mx-xl-2 { 3611 | margin-left: 0.5rem !important; 3612 | } 3613 | .m-xl-3 { 3614 | margin: 1rem !important; 3615 | } 3616 | .mt-xl-3, 3617 | .my-xl-3 { 3618 | margin-top: 1rem !important; 3619 | } 3620 | .mr-xl-3, 3621 | .mx-xl-3 { 3622 | margin-right: 1rem !important; 3623 | } 3624 | .mb-xl-3, 3625 | .my-xl-3 { 3626 | margin-bottom: 1rem !important; 3627 | } 3628 | .ml-xl-3, 3629 | .mx-xl-3 { 3630 | margin-left: 1rem !important; 3631 | } 3632 | .m-xl-4 { 3633 | margin: 1.5rem !important; 3634 | } 3635 | .mt-xl-4, 3636 | .my-xl-4 { 3637 | margin-top: 1.5rem !important; 3638 | } 3639 | .mr-xl-4, 3640 | .mx-xl-4 { 3641 | margin-right: 1.5rem !important; 3642 | } 3643 | .mb-xl-4, 3644 | .my-xl-4 { 3645 | margin-bottom: 1.5rem !important; 3646 | } 3647 | .ml-xl-4, 3648 | .mx-xl-4 { 3649 | margin-left: 1.5rem !important; 3650 | } 3651 | .m-xl-5 { 3652 | margin: 3rem !important; 3653 | } 3654 | .mt-xl-5, 3655 | .my-xl-5 { 3656 | margin-top: 3rem !important; 3657 | } 3658 | .mr-xl-5, 3659 | .mx-xl-5 { 3660 | margin-right: 3rem !important; 3661 | } 3662 | .mb-xl-5, 3663 | .my-xl-5 { 3664 | margin-bottom: 3rem !important; 3665 | } 3666 | .ml-xl-5, 3667 | .mx-xl-5 { 3668 | margin-left: 3rem !important; 3669 | } 3670 | .p-xl-0 { 3671 | padding: 0 !important; 3672 | } 3673 | .pt-xl-0, 3674 | .py-xl-0 { 3675 | padding-top: 0 !important; 3676 | } 3677 | .pr-xl-0, 3678 | .px-xl-0 { 3679 | padding-right: 0 !important; 3680 | } 3681 | .pb-xl-0, 3682 | .py-xl-0 { 3683 | padding-bottom: 0 !important; 3684 | } 3685 | .pl-xl-0, 3686 | .px-xl-0 { 3687 | padding-left: 0 !important; 3688 | } 3689 | .p-xl-1 { 3690 | padding: 0.25rem !important; 3691 | } 3692 | .pt-xl-1, 3693 | .py-xl-1 { 3694 | padding-top: 0.25rem !important; 3695 | } 3696 | .pr-xl-1, 3697 | .px-xl-1 { 3698 | padding-right: 0.25rem !important; 3699 | } 3700 | .pb-xl-1, 3701 | .py-xl-1 { 3702 | padding-bottom: 0.25rem !important; 3703 | } 3704 | .pl-xl-1, 3705 | .px-xl-1 { 3706 | padding-left: 0.25rem !important; 3707 | } 3708 | .p-xl-2 { 3709 | padding: 0.5rem !important; 3710 | } 3711 | .pt-xl-2, 3712 | .py-xl-2 { 3713 | padding-top: 0.5rem !important; 3714 | } 3715 | .pr-xl-2, 3716 | .px-xl-2 { 3717 | padding-right: 0.5rem !important; 3718 | } 3719 | .pb-xl-2, 3720 | .py-xl-2 { 3721 | padding-bottom: 0.5rem !important; 3722 | } 3723 | .pl-xl-2, 3724 | .px-xl-2 { 3725 | padding-left: 0.5rem !important; 3726 | } 3727 | .p-xl-3 { 3728 | padding: 1rem !important; 3729 | } 3730 | .pt-xl-3, 3731 | .py-xl-3 { 3732 | padding-top: 1rem !important; 3733 | } 3734 | .pr-xl-3, 3735 | .px-xl-3 { 3736 | padding-right: 1rem !important; 3737 | } 3738 | .pb-xl-3, 3739 | .py-xl-3 { 3740 | padding-bottom: 1rem !important; 3741 | } 3742 | .pl-xl-3, 3743 | .px-xl-3 { 3744 | padding-left: 1rem !important; 3745 | } 3746 | .p-xl-4 { 3747 | padding: 1.5rem !important; 3748 | } 3749 | .pt-xl-4, 3750 | .py-xl-4 { 3751 | padding-top: 1.5rem !important; 3752 | } 3753 | .pr-xl-4, 3754 | .px-xl-4 { 3755 | padding-right: 1.5rem !important; 3756 | } 3757 | .pb-xl-4, 3758 | .py-xl-4 { 3759 | padding-bottom: 1.5rem !important; 3760 | } 3761 | .pl-xl-4, 3762 | .px-xl-4 { 3763 | padding-left: 1.5rem !important; 3764 | } 3765 | .p-xl-5 { 3766 | padding: 3rem !important; 3767 | } 3768 | .pt-xl-5, 3769 | .py-xl-5 { 3770 | padding-top: 3rem !important; 3771 | } 3772 | .pr-xl-5, 3773 | .px-xl-5 { 3774 | padding-right: 3rem !important; 3775 | } 3776 | .pb-xl-5, 3777 | .py-xl-5 { 3778 | padding-bottom: 3rem !important; 3779 | } 3780 | .pl-xl-5, 3781 | .px-xl-5 { 3782 | padding-left: 3rem !important; 3783 | } 3784 | .m-xl-n1 { 3785 | margin: -0.25rem !important; 3786 | } 3787 | .mt-xl-n1, 3788 | .my-xl-n1 { 3789 | margin-top: -0.25rem !important; 3790 | } 3791 | .mr-xl-n1, 3792 | .mx-xl-n1 { 3793 | margin-right: -0.25rem !important; 3794 | } 3795 | .mb-xl-n1, 3796 | .my-xl-n1 { 3797 | margin-bottom: -0.25rem !important; 3798 | } 3799 | .ml-xl-n1, 3800 | .mx-xl-n1 { 3801 | margin-left: -0.25rem !important; 3802 | } 3803 | .m-xl-n2 { 3804 | margin: -0.5rem !important; 3805 | } 3806 | .mt-xl-n2, 3807 | .my-xl-n2 { 3808 | margin-top: -0.5rem !important; 3809 | } 3810 | .mr-xl-n2, 3811 | .mx-xl-n2 { 3812 | margin-right: -0.5rem !important; 3813 | } 3814 | .mb-xl-n2, 3815 | .my-xl-n2 { 3816 | margin-bottom: -0.5rem !important; 3817 | } 3818 | .ml-xl-n2, 3819 | .mx-xl-n2 { 3820 | margin-left: -0.5rem !important; 3821 | } 3822 | .m-xl-n3 { 3823 | margin: -1rem !important; 3824 | } 3825 | .mt-xl-n3, 3826 | .my-xl-n3 { 3827 | margin-top: -1rem !important; 3828 | } 3829 | .mr-xl-n3, 3830 | .mx-xl-n3 { 3831 | margin-right: -1rem !important; 3832 | } 3833 | .mb-xl-n3, 3834 | .my-xl-n3 { 3835 | margin-bottom: -1rem !important; 3836 | } 3837 | .ml-xl-n3, 3838 | .mx-xl-n3 { 3839 | margin-left: -1rem !important; 3840 | } 3841 | .m-xl-n4 { 3842 | margin: -1.5rem !important; 3843 | } 3844 | .mt-xl-n4, 3845 | .my-xl-n4 { 3846 | margin-top: -1.5rem !important; 3847 | } 3848 | .mr-xl-n4, 3849 | .mx-xl-n4 { 3850 | margin-right: -1.5rem !important; 3851 | } 3852 | .mb-xl-n4, 3853 | .my-xl-n4 { 3854 | margin-bottom: -1.5rem !important; 3855 | } 3856 | .ml-xl-n4, 3857 | .mx-xl-n4 { 3858 | margin-left: -1.5rem !important; 3859 | } 3860 | .m-xl-n5 { 3861 | margin: -3rem !important; 3862 | } 3863 | .mt-xl-n5, 3864 | .my-xl-n5 { 3865 | margin-top: -3rem !important; 3866 | } 3867 | .mr-xl-n5, 3868 | .mx-xl-n5 { 3869 | margin-right: -3rem !important; 3870 | } 3871 | .mb-xl-n5, 3872 | .my-xl-n5 { 3873 | margin-bottom: -3rem !important; 3874 | } 3875 | .ml-xl-n5, 3876 | .mx-xl-n5 { 3877 | margin-left: -3rem !important; 3878 | } 3879 | .m-xl-auto { 3880 | margin: auto !important; 3881 | } 3882 | .mt-xl-auto, 3883 | .my-xl-auto { 3884 | margin-top: auto !important; 3885 | } 3886 | .mr-xl-auto, 3887 | .mx-xl-auto { 3888 | margin-right: auto !important; 3889 | } 3890 | .mb-xl-auto, 3891 | .my-xl-auto { 3892 | margin-bottom: auto !important; 3893 | } 3894 | .ml-xl-auto, 3895 | .mx-xl-auto { 3896 | margin-left: auto !important; 3897 | } 3898 | } 3899 | /*# sourceMappingURL=bootstrap-grid.css.map */ -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | 14 | background-color: #f9f9f9; 15 | 16 | font-family: Arial, sans-serif; 17 | font-size: 16px; 18 | line-height: 1.429; 19 | color: black; 20 | } 21 | 22 | 23 | img { 24 | max-width: 100%; 25 | height: auto; 26 | } 27 | 28 | a { 29 | text-decoration: none; 30 | color: inherit; 31 | } 32 | 33 | ul { 34 | list-style: none; 35 | padding: 0; 36 | margin: 0; 37 | } 38 | 39 | h1, 40 | h2, 41 | h3, 42 | p { 43 | padding: 0; 44 | margin: 0; 45 | } 46 | 47 | .visually-hidden { 48 | position: absolute !important; 49 | clip: rect(1px 1px 1px 1px); 50 | clip: rect(1px, 1px, 1px, 1px); 51 | padding: 0 !important; 52 | border: 0 !important; 53 | height: 1px !important; 54 | width: 1px !important; 55 | overflow: hidden; 56 | } 57 | 58 | 59 | 60 | .compare { 61 | padding: 70px 0 40px; 62 | } 63 | 64 | .compare-title h2 { 65 | text-align: center; 66 | font-weight: 700; 67 | line-height: 44px; 68 | font-size: 30px; 69 | color: #272727; 70 | padding-bottom: 30px; 71 | } 72 | 73 | .compare-range { 74 | width: 1115px; 75 | height: 175px; 76 | background: #6b94ff 77 | } 78 | 79 | .compare-range__levelm { 80 | display: none; 81 | font-weight: 500; 82 | line-height: normal; 83 | font-size: 12px; 84 | color: rgba(255, 255, 255, .6); 85 | max-width: 100px 86 | } 87 | 88 | .compare-range__level { 89 | display: block; 90 | padding: 30px 22px 0 91 | } 92 | 93 | .compare-range__level div { 94 | display: inline-block; 95 | float: left; 96 | font-weight: 600; 97 | line-height: 19px; 98 | font-size: 13px; 99 | color: #fff 100 | } 101 | 102 | .compare-range__level .level { 103 | font-weight: 500; 104 | line-height: 18px; 105 | font-size: 12px; 106 | opacity: .6 107 | } 108 | 109 | .compare-range__level .beginner { 110 | padding-left: 64px 111 | } 112 | 113 | 114 | 115 | .compare-range__level .beginner_two { 116 | padding-left: 51px 117 | } 118 | 119 | .compare-range__level .elementary { 120 | padding-left: 94px 121 | } 122 | 123 | .compare-range__level .pre { 124 | padding-left: 72px 125 | } 126 | 127 | .compare-range__level .intermediate { 128 | padding-left: 64px 129 | } 130 | 131 | .compare-range__level .upper { 132 | padding-left: 63px 133 | } 134 | 135 | .compare-range__level .advanced { 136 | padding-left: 58px 137 | } 138 | 139 | .change_range { 140 | cursor: pointer; 141 | } 142 | 143 | @-moz-document url-prefix() { 144 | .compare-range__level .beginner { 145 | padding-left: 62px 146 | } 147 | 148 | .compare-range__level .beginner_two { 149 | padding-left: 47px 150 | } 151 | 152 | .compare-range__level .intermediate { 153 | padding-left: 67px 154 | } 155 | 156 | .compare-range__level .advanced { 157 | padding-left: 65px 158 | } 159 | } 160 | 161 | .compare-range input[type=range].range { 162 | position: relative; 163 | -webkit-appearance: none; 164 | width: 800px; 165 | margin-left: 200px 166 | } 167 | 168 | .compare-range input[type=range].range:focus { 169 | outline: 0 170 | } 171 | 172 | .compare-range input[type=range].range::-webkit-slider-runnable-track { 173 | z-index: 5; 174 | width: 100%; 175 | height: 3px; 176 | cursor: pointer; 177 | -webkit-box-shadow: 0 0 0 transparent, 0 0 0 rgba(13, 13, 13, 0); 178 | box-shadow: 0 0 0 transparent, 0 0 0 rgba(13, 13, 13, 0); 179 | background: #fff; 180 | border-radius: 25px; 181 | border: 0 solid rgba(0, 0, 1, 0) 182 | } 183 | 184 | .compare-range input[type=range].range::-webkit-slider-thumb { 185 | -webkit-box-shadow: .4px .4px .15px rgba(0, 0, 0, .4), 0 0 .4px rgba(13, 13, 13, .4); 186 | box-shadow: .4px .4px .15px rgba(0, 0, 0, .4), 0 0 .4px rgba(13, 13, 13, .4); 187 | border: 5px solid #fff; 188 | height: 20px; 189 | width: 20px; 190 | border-radius: 50px; 191 | background: #f7b739; 192 | cursor: pointer; 193 | -webkit-appearance: none; 194 | margin-top: -7.5px; 195 | position: relative 196 | } 197 | 198 | .compare-range input[type=range].range:focus::-webkit-slider-runnable-track { 199 | background: #fff 200 | } 201 | 202 | .compare-range input[type=range].range::-moz-range-track { 203 | width: 100%; 204 | height: 3px; 205 | cursor: pointer; 206 | box-shadow: 0 0 0 transparent, 0 0 0 rgba(13, 13, 13, 0); 207 | background: #fff; 208 | border-radius: 25px; 209 | border: 0 solid rgba(0, 0, 1, 0) 210 | } 211 | 212 | .compare-range input[type=range].range::-moz-range-thumb { 213 | box-shadow: .4px .4px .15px rgba(0, 0, 0, .4), 0 0 .4px rgba(13, 13, 13, .4); 214 | border: 5px solid #fff; 215 | height: 20px; 216 | width: 20px; 217 | border-radius: 50px; 218 | background: #f7b739; 219 | cursor: pointer 220 | } 221 | 222 | .compare-range input[type=range].range::-ms-track { 223 | width: 100%; 224 | height: 5px; 225 | cursor: pointer; 226 | background: 0 0; 227 | border-color: transparent; 228 | color: transparent 229 | } 230 | 231 | .compare-range input[type=range].range::-ms-fill-lower, 232 | .compare-range input[type=range].range::-ms-fill-upper { 233 | background: #fff; 234 | border: 0 solid rgba(0, 0, 1, 0); 235 | border-radius: 50px; 236 | box-shadow: 0 0 0 transparent, 0 0 0 rgba(13, 13, 13, 0) 237 | } 238 | 239 | .compare-range input[type=range].range::-ms-thumb { 240 | box-shadow: .4px .4px .15px rgba(0, 0, 0, .4), 0 0 .4px rgba(13, 13, 13, .4); 241 | border: 5px solid #fff; 242 | width: 20px; 243 | border-radius: 50px; 244 | background: #f7b739; 245 | cursor: pointer; 246 | height: 5px 247 | } 248 | 249 | .compare-range input[type=range].range:focus::-ms-fill-lower, 250 | .compare-range input[type=range].range:focus::-ms-fill-upper { 251 | background: #fff 252 | } 253 | 254 | .compare-range input[type=range].range:before { 255 | content: ""; 256 | width: 1060px; 257 | height: 5px; 258 | background: #fff; 259 | position: absolute; 260 | left: -175px; 261 | top: -1px; 262 | border-radius: 35px 263 | } 264 | 265 | .compare-result { 266 | display: -webkit-box; 267 | display: -ms-flexbox; 268 | display: flex; 269 | margin: 30px auto; 270 | } 271 | 272 | .compare-result__title h3 { 273 | font-weight: 700; 274 | line-height: 29px; 275 | font-size: 20px; 276 | color: #272727 277 | } 278 | 279 | .compare-result__other { 280 | margin-left: 100px 281 | } 282 | 283 | .compare-result__info { 284 | display: -webkit-box; 285 | display: -ms-flexbox; 286 | display: flex 287 | } 288 | 289 | .compare-result__money { 290 | margin-left: 40px 291 | } 292 | 293 | .compare-result__big { 294 | font-weight: 700; 295 | line-height: 29px; 296 | font-size: 20px 297 | } 298 | 299 | .compare-result__small { 300 | font-weight: 500; 301 | line-height: 18px; 302 | font-size: 12px; 303 | color: #9f9f9f 304 | } 305 | 306 | 307 | 308 | @media (max-width: 991.98px) { 309 | 310 | 311 | .compare-range { 312 | width: 100%; 313 | height: 210px 314 | } 315 | 316 | .compare-range__level .level { 317 | display: block; 318 | float: none; 319 | margin-bottom: 5px 320 | } 321 | 322 | .compare-range__level .beginner, 323 | .compare-range__level .beginner_two { 324 | padding-left: 0 325 | } 326 | 327 | .compare-range__level .elementary { 328 | padding-left: 40px 329 | } 330 | 331 | .compare-range__level .pre { 332 | padding-left: 27px 333 | } 334 | 335 | .compare-range__level .intermediate { 336 | padding-left: 10px 337 | } 338 | 339 | .compare-range__level .upper { 340 | padding-left: 14px 341 | } 342 | 343 | .compare-range__level .advanced { 344 | padding-left: 11px 345 | } 346 | 347 | .compare-range input[type=range].range { 348 | margin-left: 40px; 349 | width: 605px 350 | } 351 | 352 | .compare-range input[type=range].range:before { 353 | left: -35px; 354 | width: 680px 355 | } 356 | 357 | 358 | } 359 | 360 | @media (max-width: 767.98px) { 361 | 362 | .compare .title { 363 | padding-left: 23px 364 | } 365 | 366 | .compare .container { 367 | max-width: 100%; 368 | padding: 0 369 | } 370 | 371 | .compare-range { 372 | display: -webkit-box; 373 | display: -ms-flexbox; 374 | display: flex; 375 | height: 340px; 376 | width: 100vw; 377 | -webkit-box-pack: center; 378 | -ms-flex-pack: center; 379 | justify-content: center 380 | } 381 | 382 | .compare-range>div { 383 | position: relative 384 | } 385 | 386 | .compare-range__levelm { 387 | display: block; 388 | padding-left: 38px; 389 | padding-top: 28px 390 | } 391 | 392 | .compare-range__level { 393 | display: -webkit-box; 394 | display: -ms-flexbox; 395 | display: flex; 396 | -webkit-box-orient: vertical; 397 | -webkit-box-direction: reverse; 398 | -ms-flex-direction: column-reverse; 399 | flex-direction: column-reverse; 400 | padding: 30px 15px 401 | } 402 | 403 | .compare-range__level .level { 404 | display: none 405 | } 406 | 407 | .compare-range__level div { 408 | padding-left: 30px !important; 409 | font-weight: 600; 410 | line-height: 15px 411 | } 412 | 413 | .compare-range__level .beginner, 414 | .compare-range__level .beginner_two, 415 | .compare-range__level .elementary, 416 | .compare-range__level .intermediate, 417 | .compare-range__level .pre, 418 | .compare-range__level .upper { 419 | padding-top: 21px 420 | } 421 | 422 | .compare-range__level .advanced { 423 | padding-top: 17px 424 | } 425 | 426 | .compare-range input[type=range].range { 427 | position: absolute; 428 | top: 200px; 429 | left: -110px; 430 | -webkit-transform: rotate(270deg); 431 | transform: rotate(270deg); 432 | width: 200px; 433 | height: 4px 434 | } 435 | 436 | .compare-range input[type=range].range:before { 437 | left: -6px; 438 | width: 215px; 439 | top: 0 440 | } 441 | 442 | .compare-result { 443 | -webkit-box-pack: center; 444 | -ms-flex-pack: center; 445 | justify-content: center; 446 | padding: 20px 447 | } 448 | 449 | .compare-result__info { 450 | display: block 451 | } 452 | 453 | .compare-result__money { 454 | padding-top: 17px; 455 | margin-left: 0 456 | } 457 | 458 | } 459 | 460 | @media (max-width: 575.98px) { 461 | 462 | .compare { 463 | padding-bottom: 0; 464 | margin-bottom: 0 465 | } 466 | 467 | .compare-title { 468 | padding: 0 22px 469 | } 470 | 471 | .compare-title h2 { 472 | line-height: 32px; 473 | font-size: 22px 474 | } 475 | 476 | .compare-range__level div { 477 | font-size: 10px 478 | } 479 | 480 | .compare-result { 481 | -ms-flex-pack: distribute; 482 | justify-content: space-around 483 | } 484 | 485 | .compare-result__other { 486 | margin-left: 0 487 | } 488 | 489 | .compare-result__title h3 { 490 | line-height: 20px; 491 | font-size: 14px 492 | } 493 | 494 | .compare-result__big { 495 | line-height: 23px; 496 | font-size: 16px 497 | } 498 | 499 | .compare-result__small { 500 | line-height: 16px; 501 | font-size: 11px 502 | } 503 | 504 | } 505 | 506 | @media screen and (-ms-high-contrast:active), 507 | (-ms-high-contrast:none) { 508 | .compare-range { 509 | height: 225px 510 | } 511 | } 512 | 513 | @media (max-width:991px) and (-ms-high-contrast:active), 514 | (-ms-high-contrast:none) { 515 | .compare-range { 516 | height: 300px 517 | } 518 | 519 | .compare-range__level div { 520 | font-size: 12px 521 | } 522 | 523 | .compare-range__level .beginner, 524 | .compare-range__level .beginner_two { 525 | padding-left: 7px 526 | } 527 | 528 | .compare-range__level .elementary { 529 | padding-left: 50px 530 | } 531 | 532 | .compare-range__level .pre { 533 | padding-left: 27px 534 | } 535 | 536 | .compare-range__level .intermediate { 537 | padding-left: 17px 538 | } 539 | 540 | .compare-range__level .upper { 541 | padding-left: 14px 542 | } 543 | 544 | .compare-range__level .advanced { 545 | padding-left: 22px 546 | } 547 | } 548 | 549 | @media (max-width:767px) and (-ms-high-contrast:active), 550 | (-ms-high-contrast:none) { 551 | .compare { 552 | display: none 553 | } 554 | } 555 | 556 | @-moz-document url-prefix() { 557 | .compare-range input[type=range].range { 558 | width: 823px; 559 | margin-left: 192px; 560 | height: 6px; 561 | } 562 | } 563 | 564 | @media (max-width:1199px) { 565 | 566 | .compare-range { 567 | width: 100% 568 | } 569 | 570 | .compare-range__level .beginner { 571 | padding-left: 48px 572 | } 573 | 574 | .compare-range__level .beginner_two { 575 | padding-left: 36px 576 | } 577 | 578 | .compare-range__level .elementary { 579 | padding-left: 56px 580 | } 581 | 582 | .compare-range__level .pre { 583 | padding-left: 44px 584 | } 585 | 586 | .compare-range__level .intermediate { 587 | padding-left: 28px 588 | } 589 | 590 | .compare-range__level .upper { 591 | padding-left: 32px 592 | } 593 | 594 | .compare-range__level .advanced { 595 | padding-left: 30px 596 | } 597 | 598 | .compare-range input[type=range].range { 599 | margin-left: 178px; 600 | width: 645px 601 | } 602 | 603 | .compare-range input[type=range].range:before { 604 | left: -156px; 605 | width: 860px 606 | } 607 | 608 | @-moz-document url-prefix() { 609 | .compare-range input[type=range].range { 610 | width: 690px 611 | } 612 | 613 | .compare-range__level div { 614 | font-size: 12px 615 | } 616 | 617 | .compare-range__level .beginner { 618 | padding-left: 47px 619 | } 620 | 621 | .compare-range__level .beginner_two { 622 | padding-left: 34px 623 | } 624 | 625 | .compare-range__level .elementary { 626 | padding-left: 73px 627 | } 628 | 629 | .compare-range__level .pre { 630 | padding-left: 46px 631 | } 632 | 633 | .compare-range__level .intermediate { 634 | padding-left: 50px 635 | } 636 | 637 | .compare-range__level .upper { 638 | padding-left: 40px 639 | } 640 | 641 | .compare-range__level .advanced { 642 | padding-left: 49px 643 | } 644 | } 645 | } 646 | 647 | @media (max-width:991px) { 648 | 649 | .compare-range { 650 | width: 100%; 651 | height: 210px 652 | } 653 | 654 | .compare-range__level .level { 655 | display: block; 656 | float: none; 657 | margin-bottom: 5px 658 | } 659 | 660 | .compare-range__level .beginner, 661 | .compare-range__level .beginner_two { 662 | padding-left: 0 663 | } 664 | 665 | .compare-range__level .elementary { 666 | padding-left: 55px 667 | } 668 | 669 | .compare-range__level .pre { 670 | padding-left: 32px 671 | } 672 | 673 | .compare-range__level .intermediate { 674 | padding-left: 27px 675 | } 676 | 677 | .compare-range__level .upper { 678 | padding-left: 22px 679 | } 680 | 681 | .compare-range__level .advanced { 682 | padding-left: 20px 683 | } 684 | 685 | .compare-range input[type=range].range { 686 | margin-left: 40px; 687 | width: 605px 688 | } 689 | 690 | .compare-range input[type=range].range:before { 691 | left: -35px; 692 | width: 680px 693 | } 694 | 695 | @-moz-document url-prefix() { 696 | .compare-range input[type=range].range { 697 | margin-left: 35px; 698 | width: 620px 699 | } 700 | 701 | .compare-range__level div { 702 | font-size: 12px 703 | } 704 | 705 | .compare-range__level .beginner, 706 | .compare-range__level .beginner_two { 707 | padding-left: 0 708 | } 709 | 710 | .compare-range__level .elementary { 711 | padding-left: 60px 712 | } 713 | 714 | .compare-range__level .pre { 715 | padding-left: 35px 716 | } 717 | 718 | .compare-range__level .intermediate { 719 | padding-left: 35px 720 | } 721 | 722 | .compare-range__level .upper { 723 | padding-left: 28px 724 | } 725 | 726 | .compare-range__level .advanced { 727 | padding-left: 32px 728 | } 729 | } 730 | } 731 | 732 | @media (max-width:767px) { 733 | 734 | .compare .title { 735 | padding-left: 23px 736 | } 737 | 738 | .compare .container { 739 | max-width: 100%; 740 | padding: 0 741 | } 742 | 743 | .compare-range { 744 | display: -webkit-box; 745 | display: -ms-flexbox; 746 | display: flex; 747 | height: 340px; 748 | width: 100vw; 749 | -webkit-box-pack: center; 750 | -ms-flex-pack: center; 751 | justify-content: center 752 | } 753 | 754 | .compare-range>div { 755 | position: relative 756 | } 757 | 758 | .compare-range__levelm { 759 | display: block; 760 | padding-left: 38px; 761 | padding-top: 28px 762 | } 763 | 764 | .compare-range__level { 765 | display: -webkit-box; 766 | display: -ms-flexbox; 767 | display: flex; 768 | -webkit-box-orient: vertical; 769 | -webkit-box-direction: reverse; 770 | -ms-flex-direction: column-reverse; 771 | flex-direction: column-reverse; 772 | padding: 30px 15px 773 | } 774 | 775 | .compare-range__level .level { 776 | display: none 777 | } 778 | 779 | .compare-range__level div { 780 | padding-left: 30px !important; 781 | font-weight: 600; 782 | line-height: 15px 783 | } 784 | 785 | .compare-range__level .beginner, 786 | .compare-range__level .beginner_two, 787 | .compare-range__level .elementary, 788 | .compare-range__level .intermediate, 789 | .compare-range__level .pre, 790 | .compare-range__level .upper { 791 | padding-top: 21px 792 | } 793 | 794 | .compare-range__level .advanced { 795 | padding-top: 17px 796 | } 797 | 798 | .compare-range input[type=range].range { 799 | position: absolute; 800 | top: 207px; 801 | left: -110px; 802 | -webkit-transform: rotate(270deg); 803 | transform: rotate(270deg); 804 | width: 200px; 805 | height: 4px 806 | } 807 | 808 | .compare-range input[type=range].range:before { 809 | left: -8px; 810 | width: 215px; 811 | top: -1px 812 | } 813 | 814 | .compare-result { 815 | -webkit-box-pack: center; 816 | -ms-flex-pack: center; 817 | justify-content: center; 818 | padding: 20px 819 | } 820 | 821 | .compare-result__info { 822 | display: block 823 | } 824 | 825 | .compare-result__money { 826 | padding-top: 17px; 827 | margin-left: 0 828 | } 829 | 830 | @-moz-document url-prefix() { 831 | .compare-range input[type=range].range { 832 | margin-left: 35px; 833 | width: 215px; 834 | top: 210px; 835 | left: -120px 836 | } 837 | 838 | .compare-range__level div { 839 | font-size: 12px 840 | } 841 | 842 | .compare-range__level .beginner, 843 | .compare-range__level .beginner_two, 844 | .compare-range__level .elementary, 845 | .compare-range__level .intermediate, 846 | .compare-range__level .pre, 847 | .compare-range__level .upper { 848 | padding-top: 23px 849 | } 850 | 851 | .compare-range__level .advanced { 852 | padding-top: 13px 853 | } 854 | } 855 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Range 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |

Почему у нас учить Английский выгодно!

20 |
21 |
22 | 23 |
24 | 25 |
26 |
Текущий уровень
27 |
Beginner
28 |
Elementary
29 |
Pre-Intermediate
30 |
Intermediate
31 |
Upper Intermediate
32 |
Advanced
33 |
34 | 35 | 36 |
37 | 38 |
39 | 40 |
41 |
Желаемый уровень
42 |
Beginner
43 |
Elementary
44 |
Pre-Intermediate
45 |
Intermediate
46 |
Upper Intermediate
47 |
Advanced
48 |
49 | 50 | 51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |

Школа

60 |
61 |
62 |
63 |
1 месяц
64 |
Затратите
65 |
66 |
67 |
12500 руб.
68 |
Вложения
69 |
70 |
71 |
72 |
73 |
74 |

Другие школы

75 |
76 |
77 |
78 |
4 месяца
79 |
Затратите
80 |
81 |
82 |
30000 руб.
83 |
Вложения
84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /script/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | const data = [ 3 | [ 4 | [1, 6500, 2, 15000], 5 | [2, 12000, 4, 30000], 6 | [3, 18000, 7, 52500], 7 | [4, 24000, 12, 90000], 8 | [6, 35000, 16, 127500], 9 | ], 10 | [ 11 | [1, 7000, 2, 15000], 12 | [2, 13000, 5, 37500], 13 | [3, 19000, 10, 75000], 14 | [5, 30000, 13, 112500], 15 | ], 16 | [ 17 | [1, 7000, 3, 22500], 18 | [2, 13000, 8, 60000], 19 | [4, 24000, 11, 97500], 20 | ], 21 | [ 22 | [1, 7000, 5, 37500], 23 | [3, 18000, 10, 75000], 24 | ], 25 | [[2, 12000, 5, 37500]], 26 | ]; 27 | 28 | const declOfNum = (n, t) => 29 | t[ 30 | n % 100 > 4 && n % 100 < 20 31 | ? 2 32 | : [2, 0, 1, 1, 1, 2][n % 10 < 5 ? n % 10 : 5] 33 | ]; 34 | 35 | const start = document.getElementById("start"), 36 | end = document.getElementById("end"), 37 | dayThis = document.querySelector(".day_this"), 38 | moneyThis = document.querySelector(".money_this"), 39 | dayOther = document.querySelector(".day_other"), 40 | moneyOther = document.querySelector(".money_other"); 41 | compareRange = document.querySelector(".compare-range"); 42 | 43 | const showResult = (arr) => { 44 | const [dayT, moneyT, dayO, moneyO] = arr; 45 | const month = ["месяц", "месяца", "месяцев"]; 46 | dayThis.textContent = dayT + " " + declOfNum(dayT, month); 47 | moneyThis.textContent = moneyT + " руб."; 48 | dayOther.textContent = dayO + " " + declOfNum(dayO, month); 49 | moneyOther.textContent = moneyO + " руб."; 50 | }; 51 | 52 | const calcResult = () => { 53 | const startVal = parseInt(start.value); 54 | const endVal = parseInt(end.value); 55 | if (startVal === endVal) { 56 | showResult([0, 0, 0, 0]); 57 | } else { 58 | showResult(data[startVal][endVal - startVal - 1]); 59 | } 60 | }; 61 | 62 | function handler() { 63 | if (start.value > end.value) { 64 | start.value = end.value = this.value; 65 | } 66 | 67 | calcResult(); 68 | } 69 | 70 | start.addEventListener("change", handler); 71 | end.addEventListener("change", handler); 72 | 73 | const changeRange = (event) => { 74 | const target = event.target; 75 | if (target.classList.contains("change_range")) { 76 | const parent = target.closest("#started") || target.closest("#ended"); 77 | const range = parent.querySelector(".range"); 78 | range.value = target.dataset.level; 79 | handler.apply(range); 80 | } 81 | }; 82 | 83 | compareRange.addEventListener("click", changeRange); 84 | 85 | calcResult(); 86 | }); 87 | --------------------------------------------------------------------------------