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