main.css (34576B)
1 @import url(fontawesome-all.min.css); 2 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); 3 4 /* 5 Dimension by HTML5 UP 6 html5up.net | @ajlkn 7 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 8 */ 9 10 html, body, div, span, applet, object, 11 iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 12 pre, a, abbr, acronym, address, big, cite, 13 code, del, dfn, em, img, ins, kbd, q, s, samp, 14 small, strike, strong, sub, sup, tt, var, b, 15 u, i, center, dl, dt, dd, ol, ul, li, fieldset, 16 form, label, legend, table, caption, tbody, 17 tfoot, thead, tr, th, td, article, aside, 18 canvas, details, embed, figure, figcaption, 19 footer, header, hgroup, menu, nav, output, ruby, 20 section, summary, time, mark, audio, video { 21 margin: 0; 22 padding: 0; 23 border: 0; 24 font-size: 100%; 25 font: inherit; 26 vertical-align: baseline;} 27 28 article, aside, details, figcaption, figure, 29 footer, header, hgroup, menu, nav, section { 30 display: block;} 31 32 body { 33 line-height: 1; 34 } 35 36 ol, ul { 37 list-style: none; 38 } 39 40 blockquote, q { 41 quotes: none; 42 } 43 44 blockquote:before, blockquote:after, q:before, q:after { 45 content: ''; 46 content: none; 47 } 48 49 table { 50 border-collapse: collapse; 51 border-spacing: 0; 52 } 53 54 body { 55 -webkit-text-size-adjust: none; 56 } 57 58 mark { 59 background-color: transparent; 60 color: inherit; 61 } 62 63 input::-moz-focus-inner { 64 border: 0; 65 padding: 0; 66 } 67 68 input, select, textarea { 69 -moz-appearance: none; 70 -webkit-appearance: none; 71 -ms-appearance: none; 72 appearance: none; 73 } 74 75 /* Basic */ 76 77 @-ms-viewport { 78 width: device-width; 79 } 80 81 @media screen and (max-width: 480px) { 82 83 html, body { 84 min-width: 320px; 85 } 86 87 } 88 89 html { 90 box-sizing: border-box; 91 } 92 93 *, *:before, *:after { 94 box-sizing: inherit; 95 } 96 97 body { 98 background: #1b1f22; 99 } 100 101 body.is-preload *, body.is-preload *:before, body.is-preload *:after { 102 -moz-animation: none !important; 103 -webkit-animation: none !important; 104 -ms-animation: none !important; 105 animation: none !important; 106 -moz-transition: none !important; 107 -webkit-transition: none !important; 108 -ms-transition: none !important; 109 transition: none !important; 110 } 111 112 /* Type */ 113 114 html { 115 font-size: 16pt; 116 } 117 118 @media screen and (max-width: 1680px) { 119 120 html { 121 font-size: 12pt; 122 } 123 124 } 125 126 @media screen and (max-width: 736px) { 127 128 html { 129 font-size: 11pt; 130 } 131 132 } 133 134 @media screen and (max-width: 360px) { 135 136 html { 137 font-size: 10pt; 138 } 139 140 } 141 142 body, input, select, textarea { 143 color: #ffffff; 144 font-family: "Source Sans Pro", sans-serif; 145 font-weight: 300; 146 font-size: 1rem; 147 line-height: 1.65; 148 } 149 150 a { 151 -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; 152 -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; 153 -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; 154 transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; 155 border-bottom: dotted 1px rgba(255, 255, 255, 0.5); 156 text-decoration: none; 157 color: inherit; 158 } 159 160 a:hover { 161 border-bottom-color: transparent; 162 } 163 164 strong, b { 165 color: #ffffff; 166 font-weight: 600; 167 } 168 169 em, i { 170 font-style: italic; 171 } 172 173 p { 174 margin: 0 0 2rem 0; 175 } 176 177 h1, h2, h3, h4, h5, h6 { 178 color: #ffffff; 179 font-weight: 600; 180 line-height: 1.5; 181 margin: 0 0 1rem 0; 182 text-transform: uppercase; 183 letter-spacing: 0.2rem; 184 } 185 186 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 187 color: inherit; 188 text-decoration: none; 189 } 190 191 h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { 192 border-bottom: solid 1px #ffffff; 193 width: -moz-max-content; 194 width: -webkit-max-content; 195 width: -ms-max-content; 196 width: max-content; 197 padding-bottom: 0.5rem; 198 margin: 0 0 2rem 0; 199 } 200 201 h1 { 202 font-size: 2.25rem; 203 line-height: 1.3; 204 letter-spacing: 0.5rem; 205 } 206 207 h2 { 208 font-size: 1.5rem; 209 line-height: 1.4; 210 letter-spacing: 0.5rem; 211 } 212 213 h3 { 214 font-size: 1rem; 215 } 216 217 h4 { 218 font-size: 0.8rem; 219 } 220 221 h5 { 222 font-size: 0.7rem; 223 } 224 225 h6 { 226 font-size: 0.6rem; 227 } 228 229 @media screen and (max-width: 736px) { 230 231 h1 { 232 font-size: 1.75rem; 233 line-height: 1.4; 234 } 235 236 h2 { 237 font-size: 1.25em; 238 line-height: 1.5; 239 } 240 241 } 242 243 sub { 244 font-size: 0.8rem; 245 position: relative; 246 top: 0.5rem; 247 } 248 249 sup { 250 font-size: 0.8rem; 251 position: relative; 252 top: -0.5rem; 253 } 254 255 blockquote { 256 border-left: solid 4px #ffffff; 257 font-style: italic; 258 margin: 0 0 2rem 0; 259 padding: 0.5rem 0 0.5rem 2rem; 260 } 261 262 code { 263 background: rgba(255, 255, 255, 0.075); 264 border-radius: 4px; 265 font-family: "Courier New", monospace; 266 font-size: 0.9rem; 267 margin: 0 0.25rem; 268 padding: 0.25rem 0.65rem; 269 } 270 271 pre { 272 -webkit-overflow-scrolling: touch; 273 font-family: "Courier New", monospace; 274 font-size: 0.9rem; 275 margin: 0 0 2rem 0; 276 } 277 278 pre code { 279 display: block; 280 line-height: 1.75; 281 padding: 1rem 1.5rem; 282 overflow-x: auto; 283 } 284 285 hr { 286 border: 0; 287 border-bottom: solid 1px #ffffff; 288 margin: 2.75rem 0; 289 } 290 291 .align-left { 292 text-align: left; 293 } 294 295 .align-center { 296 text-align: center; 297 } 298 299 .align-right { 300 text-align: right; 301 } 302 303 /* Form */ 304 305 form { 306 margin: 0 0 2rem 0; 307 } 308 309 form > :last-child { 310 margin-bottom: 0; 311 } 312 313 form > .fields { 314 display: -moz-flex; 315 display: -webkit-flex; 316 display: -ms-flex; 317 display: flex; 318 -moz-flex-wrap: wrap; 319 -webkit-flex-wrap: wrap; 320 -ms-flex-wrap: wrap; 321 flex-wrap: wrap; 322 width: calc(100% + 3rem); 323 margin: -1.5rem 0 2rem -1.5rem; 324 } 325 326 form > .fields > .field { 327 -moz-flex-grow: 0; 328 -webkit-flex-grow: 0; 329 -ms-flex-grow: 0; 330 flex-grow: 0; 331 -moz-flex-shrink: 0; 332 -webkit-flex-shrink: 0; 333 -ms-flex-shrink: 0; 334 flex-shrink: 0; 335 padding: 1.5rem 0 0 1.5rem; 336 width: calc(100% - 1.5rem); 337 } 338 339 form > .fields > .field.half { 340 width: calc(50% - 0.75rem); 341 } 342 343 form > .fields > .field.third { 344 width: calc(100%/3 - 0.5rem); 345 } 346 347 form > .fields > .field.quarter { 348 width: calc(25% - 0.375rem); 349 } 350 351 @media screen and (max-width: 480px) { 352 353 form > .fields { 354 width: calc(100% + 3rem); 355 margin: -1.5rem 0 2rem -1.5rem; 356 } 357 358 form > .fields > .field { 359 padding: 1.5rem 0 0 1.5rem; 360 width: calc(100% - 1.5rem); 361 } 362 363 form > .fields > .field.half { 364 width: calc(100% - 1.5rem); 365 } 366 367 form > .fields > .field.third { 368 width: calc(100% - 1.5rem); 369 } 370 371 form > .fields > .field.quarter { 372 width: calc(100% - 1.5rem); 373 } 374 375 } 376 377 label { 378 color: #ffffff; 379 display: block; 380 font-size: 0.8rem; 381 font-weight: 300; 382 letter-spacing: 0.2rem; 383 line-height: 1.5; 384 margin: 0 0 1rem 0; 385 text-transform: uppercase; 386 } 387 388 input[type="text"], 389 input[type="password"], 390 input[type="email"], 391 input[type="tel"], 392 select, 393 textarea { 394 -moz-appearance: none; 395 -webkit-appearance: none; 396 -ms-appearance: none; 397 appearance: none; 398 -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 399 -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 400 -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 401 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 402 background-color: transparent; 403 border-radius: 4px; 404 border: solid 1px #ffffff; 405 color: inherit; 406 display: block; 407 outline: 0; 408 padding: 0 1rem; 409 text-decoration: none; 410 width: 100%; 411 } 412 413 input[type="text"]:invalid, 414 input[type="password"]:invalid, 415 input[type="email"]:invalid, 416 input[type="tel"]:invalid, 417 select:invalid, 418 textarea:invalid { 419 box-shadow: none; 420 } 421 422 input[type="text"]:focus, 423 input[type="password"]:focus, 424 input[type="email"]:focus, 425 input[type="tel"]:focus, 426 select:focus, 427 textarea:focus { 428 background: rgba(255, 255, 255, 0.075); 429 border-color: #ffffff; 430 box-shadow: 0 0 0 1px #ffffff; 431 } 432 433 select { 434 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E"); 435 background-size: 1.25rem; 436 background-repeat: no-repeat; 437 background-position: calc(100% - 1rem) center; 438 height: 2.75rem; 439 padding-right: 2.75rem; 440 text-overflow: ellipsis; 441 } 442 443 select option { 444 color: #ffffff; 445 background: #1b1f22; 446 } 447 448 select:focus::-ms-value { 449 background-color: transparent; 450 } 451 452 select::-ms-expand { 453 display: none; 454 } 455 456 input[type="text"], 457 input[type="password"], 458 input[type="email"], 459 select { 460 height: 2.75rem; 461 } 462 463 textarea { 464 padding: 0.75rem 1rem; 465 } 466 467 input[type="checkbox"], 468 input[type="radio"] { 469 -moz-appearance: none; 470 -webkit-appearance: none; 471 -ms-appearance: none; 472 appearance: none; 473 display: block; 474 float: left; 475 margin-right: -2rem; 476 opacity: 0; 477 width: 1rem; 478 z-index: -1; 479 } 480 481 input[type="checkbox"] + label, 482 input[type="radio"] + label { 483 text-decoration: none; 484 -moz-user-select: none; 485 -webkit-user-select: none; 486 -ms-user-select: none; 487 user-select: none; 488 color: #ffffff; 489 cursor: pointer; 490 display: inline-block; 491 font-size: 0.8rem; 492 font-weight: 300; 493 margin: 0 0 0.5rem 0; 494 padding-left: 2.65rem; 495 padding-right: 0.75rem; 496 position: relative; 497 } 498 499 input[type="checkbox"] + label:before, 500 input[type="radio"] + label:before { 501 -moz-osx-font-smoothing: grayscale; 502 -webkit-font-smoothing: antialiased; 503 display: inline-block; 504 font-style: normal; 505 font-variant: normal; 506 text-rendering: auto; 507 line-height: 1; 508 text-transform: none !important; 509 font-family: 'Font Awesome 5 Free'; 510 font-weight: 900; 511 } 512 513 input[type="checkbox"] + label:before, 514 input[type="radio"] + label:before { 515 -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 516 -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 517 -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 518 transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 519 border-radius: 4px; 520 border: solid 1px #ffffff; 521 content: ''; 522 display: inline-block; 523 height: 1.65rem; 524 left: 0; 525 line-height: 1.65rem; 526 position: absolute; 527 text-align: center; 528 top: -0.15rem; 529 width: 1.65rem; 530 } 531 532 input[type="checkbox"]:checked + label:before, 533 input[type="radio"]:checked + label:before { 534 background: #ffffff !important; 535 border-color: #ffffff !important; 536 color: #1b1f22; 537 content: '\f00c'; 538 } 539 540 input[type="checkbox"]:focus + label:before, 541 input[type="radio"]:focus + label:before { 542 background: rgba(255, 255, 255, 0.075); 543 border-color: #ffffff; 544 box-shadow: 0 0 0 1px #ffffff; 545 } 546 547 input[type="checkbox"] + label:before { 548 border-radius: 4px; 549 } 550 551 input[type="radio"] + label:before { 552 border-radius: 100%; 553 } 554 555 ::-webkit-input-placeholder { 556 color: rgba(255, 255, 255, 0.5) !important; 557 opacity: 1.0; 558 } 559 560 :-moz-placeholder { 561 color: rgba(255, 255, 255, 0.5) !important; 562 opacity: 1.0; 563 } 564 565 ::-moz-placeholder { 566 color: rgba(255, 255, 255, 0.5) !important; 567 opacity: 1.0; 568 } 569 570 :-ms-input-placeholder { 571 color: rgba(255, 255, 255, 0.5) !important; 572 opacity: 1.0; 573 } 574 575 .formerize-placeholder { 576 color: rgba(255, 255, 255, 0.5) !important; 577 opacity: 1.0; 578 } 579 580 /* Box */ 581 582 .box { 583 border-radius: 4px; 584 border: solid 1px #ffffff; 585 margin-bottom: 2rem; 586 padding: 1.5em; 587 } 588 589 .box > :last-child, 590 .box > :last-child > :last-child, 591 .box > :last-child > :last-child > :last-child { 592 margin-bottom: 0; 593 } 594 595 .box.alt { 596 border: 0; 597 border-radius: 0; 598 padding: 0; 599 } 600 601 /* Icon */ 602 603 .icon { 604 text-decoration: none; 605 border-bottom: none; 606 position: relative; 607 } 608 609 .icon:before { 610 -moz-osx-font-smoothing: grayscale; 611 -webkit-font-smoothing: antialiased; 612 display: inline-block; 613 font-style: normal; 614 font-variant: normal; 615 text-rendering: auto; 616 line-height: 1; 617 text-transform: none !important; 618 font-family: 'Font Awesome 5 Free'; 619 font-weight: 400; 620 } 621 622 .icon > .label { 623 display: none; 624 } 625 626 .icon:before { 627 line-height: inherit; 628 } 629 630 .icon.solid:before { 631 font-weight: 900; 632 } 633 634 .icon.brands:before { 635 font-family: 'Font Awesome 5 Brands'; 636 } 637 638 /* Image */ 639 640 .image { 641 border-radius: 4px; 642 border: 0; 643 display: inline-block; 644 position: relative; 645 } 646 647 .image:before { 648 pointer-events: none; 649 background-image: url("../../images/overlay.png"); 650 background-color: rgba(19, 21, 25, 0.5); 651 border-radius: 4px; 652 content: ''; 653 display: block; 654 height: 100%; 655 left: 0; 656 opacity: 0.5; 657 position: absolute; 658 top: 0; 659 width: 100%; 660 } 661 662 .image img { 663 border-radius: 4px; 664 display: block; 665 } 666 667 .image.left, .image.right { 668 max-width: 40%; 669 } 670 671 .image.left img, .image.right img { 672 width: 100%; 673 } 674 675 .image.left { 676 float: left; 677 padding: 0 1.5em 1em 0; 678 top: 0.25em; 679 } 680 681 .image.right { 682 float: right; 683 padding: 0 0 1em 1.5em; 684 top: 0.25em; 685 } 686 687 .image.fit { 688 display: block; 689 margin: 0 0 2rem 0; 690 width: 100%; 691 } 692 693 .image.fit img { 694 width: 100%; 695 } 696 697 .image.main { 698 display: block; 699 margin: 2.5rem 0; 700 width: 100%; 701 } 702 703 .image.main img { 704 width: 100%; 705 } 706 707 @media screen and (max-width: 736px) { 708 709 .image.main { 710 margin: 2rem 0; 711 } 712 713 } 714 715 @media screen and (max-width: 480px) { 716 717 .image.main { 718 margin: 1.5rem 0; 719 } 720 721 } 722 723 /* List */ 724 725 ol { 726 list-style: decimal; 727 margin: 0 0 2rem 0; 728 padding-left: 1.25em; 729 } 730 731 ol li { 732 padding-left: 0.25em; 733 } 734 735 ul { 736 list-style: disc; 737 margin: 0 0 2rem 0; 738 padding-left: 1em; 739 } 740 741 ul li { 742 padding-left: 0.5em; 743 } 744 745 ul.alt { 746 list-style: none; 747 padding-left: 0; 748 } 749 750 ul.alt li { 751 border-top: solid 1px #ffffff; 752 padding: 0.5em 0; 753 } 754 755 ul.alt li:first-child { 756 border-top: 0; 757 padding-top: 0; 758 } 759 760 dl { 761 margin: 0 0 2rem 0; 762 } 763 764 dl dt { 765 display: block; 766 font-weight: 600; 767 margin: 0 0 1rem 0; 768 } 769 770 dl dd { 771 margin-left: 2rem; 772 } 773 774 /* Actions */ 775 776 ul.actions { 777 display: -moz-flex; 778 display: -webkit-flex; 779 display: -ms-flex; 780 display: flex; 781 cursor: default; 782 list-style: none; 783 margin-left: -1rem; 784 padding-left: 0; 785 } 786 787 ul.actions li { 788 padding: 0 0 0 1rem; 789 vertical-align: middle; 790 } 791 792 ul.actions.special { 793 -moz-justify-content: center; 794 -webkit-justify-content: center; 795 -ms-justify-content: center; 796 justify-content: center; 797 width: 100%; 798 margin-left: 0; 799 } 800 801 ul.actions.special li:first-child { 802 padding-left: 0; 803 } 804 805 ul.actions.stacked { 806 -moz-flex-direction: column; 807 -webkit-flex-direction: column; 808 -ms-flex-direction: column; 809 flex-direction: column; 810 margin-left: 0; 811 } 812 813 ul.actions.stacked li { 814 padding: 1.3rem 0 0 0; 815 } 816 817 ul.actions.stacked li:first-child { 818 padding-top: 0; 819 } 820 821 ul.actions.fit { 822 width: calc(100% + 1rem); 823 } 824 825 ul.actions.fit li { 826 -moz-flex-grow: 1; 827 -webkit-flex-grow: 1; 828 -ms-flex-grow: 1; 829 flex-grow: 1; 830 -moz-flex-shrink: 1; 831 -webkit-flex-shrink: 1; 832 -ms-flex-shrink: 1; 833 flex-shrink: 1; 834 width: 100%; 835 } 836 837 ul.actions.fit li > * { 838 width: 100%; 839 } 840 841 ul.actions.fit.stacked { 842 width: 100%; 843 } 844 845 @media screen and (max-width: 480px) { 846 847 ul.actions:not(.fixed) { 848 -moz-flex-direction: column; 849 -webkit-flex-direction: column; 850 -ms-flex-direction: column; 851 flex-direction: column; 852 margin-left: 0; 853 width: 100% !important; 854 } 855 856 ul.actions:not(.fixed) li { 857 -moz-flex-grow: 1; 858 -webkit-flex-grow: 1; 859 -ms-flex-grow: 1; 860 flex-grow: 1; 861 -moz-flex-shrink: 1; 862 -webkit-flex-shrink: 1; 863 -ms-flex-shrink: 1; 864 flex-shrink: 1; 865 padding: 1rem 0 0 0; 866 text-align: center; 867 width: 100%; 868 } 869 870 ul.actions:not(.fixed) li > * { 871 width: 100%; 872 } 873 874 ul.actions:not(.fixed) li:first-child { 875 padding-top: 0; 876 } 877 878 ul.actions:not(.fixed) li input[type="submit"], 879 ul.actions:not(.fixed) li input[type="reset"], 880 ul.actions:not(.fixed) li input[type="button"], 881 ul.actions:not(.fixed) li button, 882 ul.actions:not(.fixed) li .button { 883 width: 100%; 884 } 885 886 ul.actions:not(.fixed) li input[type="submit"].icon:before, 887 ul.actions:not(.fixed) li input[type="reset"].icon:before, 888 ul.actions:not(.fixed) li input[type="button"].icon:before, 889 ul.actions:not(.fixed) li button.icon:before, 890 ul.actions:not(.fixed) li .button.icon:before { 891 margin-left: -0.5em; 892 } 893 894 } 895 896 /* Icons */ 897 898 ul.icons { 899 cursor: default; 900 list-style: none; 901 padding-left: 0; 902 } 903 904 ul.icons li { 905 display: inline-block; 906 padding: 0 0.75em 0 0; 907 } 908 909 ul.icons li:last-child { 910 padding-right: 0; 911 } 912 913 ul.icons li a { 914 border-radius: 100%; 915 box-shadow: inset 0 0 0 1px #ffffff; 916 display: inline-block; 917 height: 2.25rem; 918 line-height: 2.25rem; 919 text-align: center; 920 width: 2.25rem; 921 } 922 923 ul.icons li a:hover { 924 background-color: rgba(255, 255, 255, 0.075); 925 } 926 927 ul.icons li a:active { 928 background-color: rgba(255, 255, 255, 0.175); 929 } 930 931 /* Table */ 932 933 .table-wrapper { 934 -webkit-overflow-scrolling: touch; 935 overflow-x: auto; 936 } 937 938 table { 939 margin: 0 0 2rem 0; 940 width: 100%; 941 } 942 943 table tbody tr { 944 border: solid 1px #ffffff; 945 border-left: 0; 946 border-right: 0; 947 } 948 949 table tbody tr:nth-child(2n + 1) { 950 background-color: rgba(255, 255, 255, 0.075); 951 } 952 953 table td { 954 padding: 0.75em 0.75em; 955 } 956 957 table th { 958 color: #ffffff; 959 font-size: 0.9em; 960 font-weight: 600; 961 padding: 0 0.75em 0.75em 0.75em; 962 text-align: left; 963 } 964 965 table thead { 966 border-bottom: solid 2px #ffffff; 967 } 968 969 table tfoot { 970 border-top: solid 2px #ffffff; 971 } 972 973 table.alt { 974 border-collapse: separate; 975 } 976 977 table.alt tbody tr td { 978 border: solid 1px #ffffff; 979 border-left-width: 0; 980 border-top-width: 0; 981 } 982 983 table.alt tbody tr td:first-child { 984 border-left-width: 1px; 985 } 986 987 table.alt tbody tr:first-child td { 988 border-top-width: 1px; 989 } 990 991 table.alt thead { 992 border-bottom: 0; 993 } 994 995 table.alt tfoot { 996 border-top: 0; 997 } 998 999 /* Button */ 1000 1001 input[type="submit"], 1002 input[type="reset"], 1003 input[type="button"], 1004 button, 1005 .button { 1006 -moz-appearance: none; 1007 -webkit-appearance: none; 1008 -ms-appearance: none; 1009 appearance: none; 1010 -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1011 -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1012 -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1013 transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 1014 background-color: transparent; 1015 border-radius: 4px; 1016 border: 0; 1017 box-shadow: inset 0 0 0 1px #ffffff; 1018 color: #ffffff !important; 1019 cursor: pointer; 1020 display: inline-block; 1021 font-size: 0.8rem; 1022 font-weight: 300; 1023 height: 2.75rem; 1024 letter-spacing: 0.2rem; 1025 line-height: 2.75rem; 1026 outline: 0; 1027 padding: 0 1.25rem 0 1.35rem; 1028 text-align: center; 1029 text-decoration: none; 1030 text-transform: uppercase; 1031 white-space: nowrap; 1032 } 1033 1034 input[type="submit"]:hover, 1035 input[type="reset"]:hover, 1036 input[type="button"]:hover, 1037 button:hover, 1038 .button:hover { 1039 background-color: rgba(255, 255, 255, 0.075); 1040 } 1041 1042 input[type="submit"]:active, 1043 input[type="reset"]:active, 1044 input[type="button"]:active, 1045 button:active, 1046 .button:active { 1047 background-color: rgba(255, 255, 255, 0.175); 1048 } 1049 1050 input[type="submit"].icon:before, 1051 input[type="reset"].icon:before, 1052 input[type="button"].icon:before, 1053 button.icon:before, 1054 .button.icon:before { 1055 margin-right: 0.5em; 1056 } 1057 1058 input[type="submit"].fit, 1059 input[type="reset"].fit, 1060 input[type="button"].fit, 1061 button.fit, 1062 .button.fit { 1063 width: 100%; 1064 } 1065 1066 input[type="submit"].small, 1067 input[type="reset"].small, 1068 input[type="button"].small, 1069 button.small, 1070 .button.small { 1071 font-size: 0.6rem; 1072 height: 2.0625rem; 1073 line-height: 2.0625rem; 1074 } 1075 1076 input[type="submit"].primary, 1077 input[type="reset"].primary, 1078 input[type="button"].primary, 1079 button.primary, 1080 .button.primary { 1081 background-color: #ffffff; 1082 color: #1b1f22 !important; 1083 font-weight: 600; 1084 } 1085 1086 input[type="submit"].disabled, input[type="submit"]:disabled, 1087 input[type="reset"].disabled, 1088 input[type="reset"]:disabled, 1089 input[type="button"].disabled, 1090 input[type="button"]:disabled, 1091 button.disabled, 1092 button:disabled, 1093 .button.disabled, 1094 .button:disabled { 1095 pointer-events: none; 1096 cursor: default; 1097 opacity: 0.25; 1098 } 1099 1100 input[type="submit"], 1101 input[type="reset"], 1102 input[type="button"], 1103 button { 1104 line-height: calc(2.75rem - 2px); 1105 } 1106 1107 /* BG */ 1108 1109 #bg { 1110 -moz-transform: scale(1.0); 1111 -webkit-transform: scale(1.0); 1112 -ms-transform: scale(1.0); 1113 transform: scale(1.0); 1114 -webkit-backface-visibility: hidden; 1115 position: fixed; 1116 top: 0; 1117 left: 0; 1118 width: 100%; 1119 height: 100vh; 1120 z-index: 1; 1121 } 1122 1123 #bg:before, #bg:after { 1124 content: ''; 1125 display: block; 1126 position: absolute; 1127 top: 0; 1128 left: 0; 1129 width: 100%; 1130 height: 100%; 1131 } 1132 1133 #bg:before { 1134 -moz-transition: background-color 2.5s ease-in-out; 1135 -webkit-transition: background-color 2.5s ease-in-out; 1136 -ms-transition: background-color 2.5s ease-in-out; 1137 transition: background-color 2.5s ease-in-out; 1138 -moz-transition-delay: 0.75s; 1139 -webkit-transition-delay: 0.75s; 1140 -ms-transition-delay: 0.75s; 1141 transition-delay: 0.75s; 1142 background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("https://mattfehrenbach.eu-central-1.linodeobjects.com/overlay.png"); 1143 background-size: auto, 256px 256px; 1144 background-position: center, center; 1145 background-repeat: no-repeat, repeat; 1146 z-index: 2; 1147 } 1148 1149 #bg:after { 1150 -moz-transform: scale(1.125); 1151 -webkit-transform: scale(1.125); 1152 -ms-transform: scale(1.125); 1153 transform: scale(1.125); 1154 -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; 1155 -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; 1156 -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; 1157 transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; 1158 background-image: url("https://mattfehrenbach.eu-central-1.linodeobjects.com/bg.jpg"); 1159 background-position: center; 1160 background-size: cover; 1161 background-repeat: no-repeat; 1162 z-index: 1; 1163 } 1164 1165 body.is-article-visible #bg:after { 1166 -moz-transform: scale(1.0825); 1167 -webkit-transform: scale(1.0825); 1168 -ms-transform: scale(1.0825); 1169 transform: scale(1.0825); 1170 -moz-filter: blur(0.2rem); 1171 -webkit-filter: blur(0.2rem); 1172 -ms-filter: blur(0.2rem); 1173 filter: blur(0.2rem); 1174 } 1175 1176 body.is-preload #bg:before { 1177 background-color: #000000; 1178 } 1179 1180 /* Wrapper */ 1181 1182 #wrapper { 1183 display: -moz-flex; 1184 display: -webkit-flex; 1185 display: -ms-flex; 1186 display: flex; 1187 -moz-flex-direction: column; 1188 -webkit-flex-direction: column; 1189 -ms-flex-direction: column; 1190 flex-direction: column; 1191 -moz-align-items: center; 1192 -webkit-align-items: center; 1193 -ms-align-items: center; 1194 align-items: center; 1195 -moz-justify-content: space-between; 1196 -webkit-justify-content: space-between; 1197 -ms-justify-content: space-between; 1198 justify-content: space-between; 1199 position: relative; 1200 min-height: 100vh; 1201 width: 100%; 1202 padding: 4rem 2rem; 1203 z-index: 3; 1204 } 1205 1206 #wrapper:before { 1207 content: ''; 1208 display: block; 1209 } 1210 1211 @media screen and (max-width: 1680px) { 1212 1213 #wrapper { 1214 padding: 3rem 2rem; 1215 } 1216 1217 } 1218 1219 @media screen and (max-width: 736px) { 1220 1221 #wrapper { 1222 padding: 2rem 1rem; 1223 } 1224 1225 } 1226 1227 @media screen and (max-width: 480px) { 1228 1229 #wrapper { 1230 padding: 1rem; 1231 } 1232 1233 } 1234 1235 /* Header */ 1236 1237 #header { 1238 display: -moz-flex; 1239 display: -webkit-flex; 1240 display: -ms-flex; 1241 display: flex; 1242 -moz-flex-direction: column; 1243 -webkit-flex-direction: column; 1244 -ms-flex-direction: column; 1245 flex-direction: column; 1246 -moz-align-items: center; 1247 -webkit-align-items: center; 1248 -ms-align-items: center; 1249 align-items: center; 1250 -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1251 -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1252 -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1253 transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1254 background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); 1255 background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); 1256 background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); 1257 background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); 1258 max-width: 100%; 1259 text-align: center; 1260 } 1261 1262 #header > * { 1263 -moz-transition: opacity 0.325s ease-in-out; 1264 -webkit-transition: opacity 0.325s ease-in-out; 1265 -ms-transition: opacity 0.325s ease-in-out; 1266 transition: opacity 0.325s ease-in-out; 1267 position: relative; 1268 margin-top: 3.5rem; 1269 } 1270 1271 #header > *:before { 1272 content: ''; 1273 display: block; 1274 position: absolute; 1275 top: calc(-3.5rem - 1px); 1276 left: calc(50% - 1px); 1277 width: 1px; 1278 height: calc(3.5rem + 1px); 1279 background: #ffffff; 1280 } 1281 1282 #header > :first-child { 1283 margin-top: 0; 1284 } 1285 1286 #header > :first-child:before { 1287 display: none; 1288 } 1289 1290 #header .logo { 1291 width: 5.5rem; 1292 height: 5.5rem; 1293 line-height: 5.5rem; 1294 border: solid 1px #ffffff; 1295 border-radius: 100%; 1296 } 1297 1298 #header .logo .icon:before { 1299 font-size: 2rem; 1300 } 1301 1302 #header .content { 1303 border-style: solid; 1304 border-color: #ffffff; 1305 border-top-width: 1px; 1306 border-bottom-width: 1px; 1307 max-width: 100%; 1308 } 1309 1310 #header .content .inner { 1311 -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; 1312 -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; 1313 -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; 1314 transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; 1315 -moz-transition-delay: 0.25s; 1316 -webkit-transition-delay: 0.25s; 1317 -ms-transition-delay: 0.25s; 1318 transition-delay: 0.25s; 1319 padding: 3rem 2rem; 1320 max-height: 40rem; 1321 overflow: hidden; 1322 } 1323 1324 #header .content .inner > :last-child { 1325 margin-bottom: 0; 1326 } 1327 1328 #header .content p { 1329 text-transform: uppercase; 1330 letter-spacing: 0.2rem; 1331 font-size: 0.8rem; 1332 line-height: 2; 1333 } 1334 1335 #header nav ul { 1336 display: -moz-flex; 1337 display: -webkit-flex; 1338 display: -ms-flex; 1339 display: flex; 1340 margin-bottom: 0; 1341 list-style: none; 1342 padding-left: 0; 1343 border: solid 1px #ffffff; 1344 border-radius: 4px; 1345 } 1346 1347 #header nav ul li { 1348 padding-left: 0; 1349 border-left: solid 1px #ffffff; 1350 } 1351 1352 #header nav ul li:first-child { 1353 border-left: 0; 1354 } 1355 1356 #header nav ul li a { 1357 display: block; 1358 min-width: 7.5rem; 1359 height: 2.75rem; 1360 line-height: 2.75rem; 1361 padding: 0 1.25rem 0 1.45rem; 1362 text-transform: uppercase; 1363 letter-spacing: 0.2rem; 1364 font-size: 0.8rem; 1365 border-bottom: 0; 1366 } 1367 1368 #header nav ul li a:hover { 1369 background-color: rgba(255, 255, 255, 0.075); 1370 } 1371 1372 #header nav ul li a:active { 1373 background-color: rgba(255, 255, 255, 0.175); 1374 } 1375 1376 #header nav.use-middle:after { 1377 content: ''; 1378 display: block; 1379 position: absolute; 1380 top: 0; 1381 left: calc(50% - 1px); 1382 width: 1px; 1383 height: 100%; 1384 background: #ffffff; 1385 } 1386 1387 #header nav.use-middle ul li.is-middle { 1388 border-left: 0; 1389 } 1390 1391 body.is-article-visible #header { 1392 -moz-transform: scale(0.95); 1393 -webkit-transform: scale(0.95); 1394 -ms-transform: scale(0.95); 1395 transform: scale(0.95); 1396 -moz-filter: blur(0.1rem); 1397 -webkit-filter: blur(0.1rem); 1398 -ms-filter: blur(0.1rem); 1399 filter: blur(0.1rem); 1400 opacity: 0; 1401 } 1402 1403 body.is-preload #header { 1404 -moz-filter: blur(0.125rem); 1405 -webkit-filter: blur(0.125rem); 1406 -ms-filter: blur(0.125rem); 1407 filter: blur(0.125rem); 1408 } 1409 1410 body.is-preload #header > * { 1411 opacity: 0; 1412 } 1413 1414 body.is-preload #header .content .inner { 1415 max-height: 0; 1416 padding-top: 0; 1417 padding-bottom: 0; 1418 opacity: 0; 1419 } 1420 1421 @media screen and (max-width: 980px) { 1422 1423 #header .content p br { 1424 display: none; 1425 } 1426 1427 } 1428 1429 @media screen and (max-width: 736px) { 1430 1431 #header > * { 1432 margin-top: 2rem; 1433 } 1434 1435 #header > *:before { 1436 top: calc(-2rem - 1px); 1437 height: calc(2rem + 1px); 1438 } 1439 1440 #header .logo { 1441 width: 4.75rem; 1442 height: 4.75rem; 1443 line-height: 4.75rem; 1444 } 1445 1446 #header .logo .icon:before { 1447 font-size: 1.75rem; 1448 } 1449 1450 #header .content .inner { 1451 padding: 2.5rem 1rem; 1452 } 1453 1454 #header .content p { 1455 line-height: 1.875; 1456 } 1457 1458 } 1459 1460 @media screen and (max-width: 480px) { 1461 1462 #header { 1463 padding: 1.5rem 0; 1464 } 1465 1466 #header .content .inner { 1467 padding: 2.5rem 0; 1468 } 1469 1470 #header nav ul { 1471 -moz-flex-direction: column; 1472 -webkit-flex-direction: column; 1473 -ms-flex-direction: column; 1474 flex-direction: column; 1475 min-width: 10rem; 1476 max-width: 100%; 1477 } 1478 1479 #header nav ul li { 1480 border-left: 0; 1481 border-top: solid 1px #ffffff; 1482 } 1483 1484 #header nav ul li:first-child { 1485 border-top: 0; 1486 } 1487 1488 #header nav ul li a { 1489 height: 3rem; 1490 line-height: 3rem; 1491 min-width: 0; 1492 width: 100%; 1493 } 1494 1495 #header nav.use-middle:after { 1496 display: none; 1497 } 1498 1499 } 1500 1501 /* Main */ 1502 1503 #main { 1504 -moz-flex-grow: 1; 1505 -webkit-flex-grow: 1; 1506 -ms-flex-grow: 1; 1507 flex-grow: 1; 1508 -moz-flex-shrink: 1; 1509 -webkit-flex-shrink: 1; 1510 -ms-flex-shrink: 1; 1511 flex-shrink: 1; 1512 display: -moz-flex; 1513 display: -webkit-flex; 1514 display: -ms-flex; 1515 display: flex; 1516 -moz-align-items: center; 1517 -webkit-align-items: center; 1518 -ms-align-items: center; 1519 align-items: center; 1520 -moz-justify-content: center; 1521 -webkit-justify-content: center; 1522 -ms-justify-content: center; 1523 justify-content: center; 1524 -moz-flex-direction: column; 1525 -webkit-flex-direction: column; 1526 -ms-flex-direction: column; 1527 flex-direction: column; 1528 position: relative; 1529 max-width: 100%; 1530 z-index: 3; 1531 } 1532 1533 #main article { 1534 -moz-transform: translateY(0.25rem); 1535 -webkit-transform: translateY(0.25rem); 1536 -ms-transform: translateY(0.25rem); 1537 transform: translateY(0.25rem); 1538 -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out; 1539 -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out; 1540 -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out; 1541 transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; 1542 padding: 4.5rem 2.5rem 1.5rem 2.5rem ; 1543 position: relative; 1544 width: 40rem; 1545 max-width: 100%; 1546 background-color: rgba(27, 31, 34, 0.85); 1547 border-radius: 4px; 1548 opacity: 0; 1549 } 1550 1551 #main article.active { 1552 -moz-transform: translateY(0); 1553 -webkit-transform: translateY(0); 1554 -ms-transform: translateY(0); 1555 transform: translateY(0); 1556 opacity: 1; 1557 } 1558 1559 #main article .close { 1560 display: block; 1561 position: absolute; 1562 top: 0; 1563 right: 0; 1564 width: 4rem; 1565 height: 4rem; 1566 cursor: pointer; 1567 text-indent: 4rem; 1568 overflow: hidden; 1569 white-space: nowrap; 1570 } 1571 1572 #main article .close:before { 1573 -moz-transition: background-color 0.2s ease-in-out; 1574 -webkit-transition: background-color 0.2s ease-in-out; 1575 -ms-transition: background-color 0.2s ease-in-out; 1576 transition: background-color 0.2s ease-in-out; 1577 content: ''; 1578 display: block; 1579 position: absolute; 1580 top: 0.75rem; 1581 left: 0.75rem; 1582 width: 2.5rem; 1583 height: 2.5rem; 1584 border-radius: 100%; 1585 background-position: center; 1586 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); 1587 background-size: 20px 20px; 1588 background-repeat: no-repeat; 1589 } 1590 1591 #main article .close:hover:before { 1592 background-color: rgba(255, 255, 255, 0.075); 1593 } 1594 1595 #main article .close:active:before { 1596 background-color: rgba(255, 255, 255, 0.175); 1597 } 1598 1599 @media screen and (max-width: 736px) { 1600 1601 #main article { 1602 padding: 3.5rem 2rem 0.5rem 2rem ; 1603 } 1604 1605 #main article .close:before { 1606 top: 0.875rem; 1607 left: 0.875rem; 1608 width: 2.25rem; 1609 height: 2.25rem; 1610 background-size: 14px 14px; 1611 } 1612 1613 } 1614 1615 @media screen and (max-width: 480px) { 1616 1617 #main article { 1618 padding: 3rem 1.5rem 0.5rem 1.5rem ; 1619 } 1620 1621 } 1622 1623 /* Footer */ 1624 1625 #footer { 1626 -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1627 -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1628 -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1629 transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; 1630 width: 100%; 1631 max-width: 100%; 1632 margin-top: 2rem; 1633 text-align: center; 1634 } 1635 1636 #footer .copyright { 1637 letter-spacing: 0.2rem; 1638 font-size: 0.6rem; 1639 opacity: 0.75; 1640 margin-bottom: 0; 1641 text-transform: uppercase; 1642 } 1643 1644 body.is-article-visible #footer { 1645 -moz-transform: scale(0.95); 1646 -webkit-transform: scale(0.95); 1647 -ms-transform: scale(0.95); 1648 transform: scale(0.95); 1649 -moz-filter: blur(0.1rem); 1650 -webkit-filter: blur(0.1rem); 1651 -ms-filter: blur(0.1rem); 1652 filter: blur(0.1rem); 1653 opacity: 0; 1654 } 1655 1656 body.is-preload #footer { 1657 opacity: 0; 1658 }