style.css (156153B)
1 @charset "UTF-8"; 2 3 /* 4 Theme Name: Twenty Twenty-One 5 Theme URI: https://wordpress.org/themes/twentytwentyone/ 6 Author: the WordPress team 7 Author URI: https://wordpress.org/ 8 Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. 9 Requires at least: 5.3 10 Tested up to: 5.8 11 Requires PHP: 5.6 12 Version: 1.4 13 License: GNU General Public License v2 or later 14 License URI: http://www.gnu.org/licenses/gpl-2.0.html 15 Text Domain: twentytwentyone 16 Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready 17 18 Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org 19 Twenty Twenty-One is distributed under the terms of the GNU GPL. 20 */ 21 22 /** 23 * SETTINGS 24 * File-header..........The file header for the themes style.css file. 25 * Fonts................Any font files, if the project needs specific fonts. 26 * Global...............Project-specific, globally available variables. 27 * 28 * TOOLS 29 * Functions............Global functions. 30 * Mixins...............Global mixins. 31 * 32 * GENERIC 33 * Normalize.css........Normalise browser defaults. 34 * Breakpoints..........Mixins and variables for responsive styles 35 * Vertical-margins.....Vertical spacing for the main components. 36 * Reset................Reset specific elements to make them easier to style in other contexts. 37 * Clearings............Clearings for the main components. 38 * 39 * ELEMENTS 40 * Blockquote...........Default blockquote. 41 * Forms................Element-level form styling. 42 * Headings.............H1–H6 43 * Links................Default links. 44 * Lists................Default lists. 45 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video. 46 * 47 * BLOCKS 48 * Audio................Specific styles for the audio block. 49 * Button...............Specific styles for the button block. 50 * Code.................Specific styles for the code block. 51 * Columns..............Specific styles for the columns block. 52 * Cover................Specific styles for the cover block. 53 * File.................Specific styles for the file block. 54 * Gallery..............Specific styles for the gallery block. 55 * Group................Specific styles for the group block. 56 * Heading..............Specific styles for the heading block. 57 * Image................Specific styles for the image block. 58 * Latest comments......Specific styles for the latest comments block. 59 * Latest posts.........Specific styles for the latest posts block. 60 * Legacy...............Specific styles for the legacy gallery. 61 * List.................Specific styles for the list block. 62 * Media text...........Specific styles for the media and text block. 63 * Navigation...........Specific styles for the navigation block. 64 * Paragraph............Specific styles for the paragraph block. 65 * Pullquote............Specific styles for the pullquote block. 66 * Quote................Specific styles for the quote block. 67 * Search...............Specific styles for the search block. 68 * Separator............Specific styles for the separator block. 69 * Spacer...............Specific styles for the spacer block. 70 * Table................Specific styles for the table block. 71 * Verse................Specific styles for the verse block. 72 * Video................Specific styles for the video block. 73 * Utilities............Block alignments. 74 * 75 * COMPONENTS 76 * Header...............Header styles. 77 * Footer...............Footer styles. 78 * Comments.............Comment styles. 79 * Archives.............Archive styles. 80 * 404..................404 styles. 81 * Search...............Search styles. 82 * Navigation...........Navigation styles. 83 * Footer Navigation....Footer Navigation styles. 84 * Pagination...........Pagination styles. 85 * Single...............Single page and post styles. 86 * Posts and pages......Misc, sticky post styles. 87 * Entry................Entry, author biography. 88 * Widget...............Widget styles. 89 * Editor...............Editor styles. 90 * 91 * UTILITIES 92 * A11y.................Screen reader text, prefers reduced motion etc. 93 * Color Palette........Classes for the color palette colors. 94 * Editor Font Sizes....Editor Font Sizes. 95 * Measure..............The width of a line of text, in characters. 96 */ 97 98 /* Categories 01 to 03 are the basics. */ 99 100 /* Variables */ 101 :root { 102 103 /* Font Family */ 104 --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 105 --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 106 107 /* Font Size */ 108 --global--font-size-base: 1.25rem; 109 --global--font-size-xs: 1rem; 110 --global--font-size-sm: 1.125rem; 111 --global--font-size-md: 1.25rem; 112 --global--font-size-lg: 1.5rem; 113 --global--font-size-xl: 2.25rem; 114 --global--font-size-xxl: 4rem; 115 --global--font-size-xxxl: 5rem; 116 --global--font-size-page-title: var(--global--font-size-xxl); 117 --global--letter-spacing: normal; 118 119 /* Line Height */ 120 --global--line-height-body: 1.7; 121 --global--line-height-heading: 1.3; 122 --global--line-height-page-title: 1.1; 123 124 /* Headings */ 125 --heading--font-family: var(--global--font-primary); 126 --heading--font-size-h6: var(--global--font-size-xs); 127 --heading--font-size-h5: var(--global--font-size-sm); 128 --heading--font-size-h4: var(--global--font-size-lg); 129 --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); 130 --heading--font-size-h2: var(--global--font-size-xl); 131 --heading--font-size-h1: var(--global--font-size-page-title); 132 --heading--letter-spacing-h6: 0.05em; 133 --heading--letter-spacing-h5: 0.05em; 134 --heading--letter-spacing-h4: var(--global--letter-spacing); 135 --heading--letter-spacing-h3: var(--global--letter-spacing); 136 --heading--letter-spacing-h2: var(--global--letter-spacing); 137 --heading--letter-spacing-h1: var(--global--letter-spacing); 138 --heading--line-height-h6: var(--global--line-height-heading); 139 --heading--line-height-h5: var(--global--line-height-heading); 140 --heading--line-height-h4: var(--global--line-height-heading); 141 --heading--line-height-h3: var(--global--line-height-heading); 142 --heading--line-height-h2: var(--global--line-height-heading); 143 --heading--line-height-h1: var(--global--line-height-page-title); 144 --heading--font-weight: normal; 145 --heading--font-weight-page-title: 300; 146 --heading--font-weight-strong: 600; 147 148 /* Block: Latest posts */ 149 --latest-posts--title-font-family: var(--heading--font-family); 150 --latest-posts--title-font-size: var(--heading--font-size-h3); 151 --latest-posts--description-font-family: var(--global--font-secondary); 152 --latest-posts--description-font-size: var(--global--font-size-sm); 153 --list--font-family: var(--global--font-secondary); 154 --definition-term--font-family: var(--global--font-primary); 155 156 /* Colors */ 157 --global--color-black: #000; 158 --global--color-dark-gray: #28303d; 159 --global--color-gray: #39414d; 160 --global--color-light-gray: #f0f0f0; 161 --global--color-green: #d1e4dd; 162 --global--color-blue: #d1dfe4; 163 --global--color-purple: #d1d1e4; 164 --global--color-red: #e4d1d1; 165 --global--color-orange: #e4dad1; 166 --global--color-yellow: #eeeadd; 167 --global--color-white: #fff; 168 --global--color-white-50: rgba(255, 255, 255, 0.5); 169 --global--color-white-90: rgba(255, 255, 255, 0.9); 170 --global--color-primary: var(--global--color-dark-gray); 171 172 /* Body text color, site title, footer text color. */ 173 --global--color-secondary: var(--global--color-gray); 174 175 /* Headings */ 176 --global--color-primary-hover: var(--global--color-primary); 177 --global--color-background: var(--global--color-green); 178 179 /* Mint, default body background */ 180 --global--color-border: var(--global--color-primary); 181 182 /* Used for borders (separators) */ 183 184 /* Spacing */ 185 --global--spacing-unit: 20px; 186 --global--spacing-measure: unset; 187 --global--spacing-horizontal: 25px; 188 --global--spacing-vertical: 30px; 189 190 /* Elevation */ 191 --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); 192 193 /* Forms */ 194 --form--font-family: var(--global--font-secondary); 195 --form--font-size: var(--global--font-size-sm); 196 --form--line-height: var(--global--line-height-body); 197 --form--color-text: var(--global--color-dark-gray); 198 --form--color-ranged: var(--global--color-secondary); 199 --form--label-weight: 500; 200 --form--border-color: var(--global--color-secondary); 201 --form--border-width: 3px; 202 --form--border-radius: 0; 203 --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); 204 205 /* Cover block */ 206 --cover--height: calc(15 * var(--global--spacing-vertical)); 207 --cover--color-foreground: var(--global--color-white); 208 --cover--color-background: var(--global--color-black); 209 210 /* Buttons */ 211 --button--color-text: var(--global--color-background); 212 --button--color-text-hover: var(--global--color-secondary); 213 --button--color-text-active: var(--global--color-secondary); 214 --button--color-background: var(--global--color-secondary); 215 --button--color-background-active: var(--global--color-background); 216 --button--font-family: var(--global--font-primary); 217 --button--font-size: var(--global--font-size-base); 218 --button--font-weight: 500; 219 --button--line-height: 1.5; 220 --button--border-width: 3px; 221 --button--border-radius: 0; 222 --button--padding-vertical: 15px; 223 --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); 224 225 /* entry */ 226 --entry-header--color: var(--global--color-primary); 227 --entry-header--color-link: currentColor; 228 --entry-header--color-hover: var(--global--color-primary-hover); 229 --entry-header--color-focus: var(--global--color-secondary); 230 --entry-header--font-size: var(--heading--font-size-h2); 231 --entry-content--font-family: var(--global--font-secondary); 232 --entry-author-bio--font-family: var(--heading--font-family); 233 --entry-author-bio--font-size: var(--heading--font-size-h4); 234 235 /* Header */ 236 --branding--color-text: var(--global--color-primary); 237 --branding--color-link: var(--global--color-primary); 238 --branding--color-link-hover: var(--global--color-secondary); 239 --branding--title--font-family: var(--global--font-primary); 240 --branding--title--font-size: var(--global--font-size-lg); 241 --branding--title--font-size-mobile: var(--heading--font-size-h4); 242 --branding--title--font-weight: normal; 243 --branding--title--text-transform: uppercase; 244 --branding--description--font-family: var(--global--font-secondary); 245 --branding--description--font-size: var(--global--font-size-sm); 246 --branding--description--font-family: var(--global--font-secondary); 247 --branding--logo--max-width: 300px; 248 --branding--logo--max-height: 100px; 249 --branding--logo--max-width-mobile: 96px; 250 --branding--logo--max-height-mobile: 96px; 251 252 /* Main navigation */ 253 --primary-nav--font-family: var(--global--font-secondary); 254 --primary-nav--font-family-mobile: var(--global--font-primary); 255 --primary-nav--font-size: var(--global--font-size-md); 256 --primary-nav--font-size-sub-menu: var(--global--font-size-xs); 257 --primary-nav--font-size-mobile: var(--global--font-size-sm); 258 --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); 259 --primary-nav--font-size-button: var(--global--font-size-xs); 260 --primary-nav--font-style: normal; 261 --primary-nav--font-style-sub-menu-mobile: normal; 262 --primary-nav--font-weight: normal; 263 --primary-nav--font-weight-button: 500; 264 --primary-nav--color-link: var(--global--color-primary); 265 --primary-nav--color-link-hover: var(--global--color-primary-hover); 266 --primary-nav--color-text: var(--global--color-primary); 267 --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); 268 --primary-nav--border-color: var(--global--color-primary); 269 270 /* Pagination */ 271 --pagination--color-text: var(--global--color-primary); 272 --pagination--color-link-hover: var(--global--color-primary-hover); 273 --pagination--font-family: var(--global--font-secondary); 274 --pagination--font-size: var(--global--font-size-lg); 275 --pagination--font-weight: normal; 276 --pagination--font-weight-strong: 600; 277 278 /* Footer */ 279 --footer--color-text: var(--global--color-primary); 280 --footer--color-link: var(--global--color-primary); 281 --footer--color-link-hover: var(--global--color-primary-hover); 282 --footer--font-family: var(--global--font-primary); 283 --footer--font-size: var(--global--font-size-sm); 284 285 /* Block: Pull quote */ 286 --pullquote--font-family: var(--global--font-primary); 287 --pullquote--font-size: var(--heading--font-size-h3); 288 --pullquote--font-style: normal; 289 --pullquote--letter-spacing: var(--heading--letter-spacing-h4); 290 --pullquote--line-height: var(--global--line-height-heading); 291 --pullquote--border-width: 3px; 292 --pullquote--border-color: var(--global--color-primary); 293 --pullquote--color-foreground: var(--global--color-primary); 294 --pullquote--color-background: var(--global--color-background); 295 --quote--font-family: var(--global--font-secondary); 296 --quote--font-size: var(--global--font-size-md); 297 --quote--font-size-large: var(--global--font-size-xl); 298 --quote--font-style: normal; 299 --quote--font-weight: 700; 300 --quote--font-weight-strong: bolder; 301 --quote--font-style-large: normal; 302 --quote--font-style-cite: normal; 303 --quote--line-height: var(--global--line-height-body); 304 --quote--line-height-large: 1.35; 305 --separator--border-color: var(--global--color-border); 306 --separator--height: 1px; 307 308 /* Block: Table */ 309 --table--stripes-border-color: var(--global--color-light-gray); 310 --table--stripes-background-color: var(--global--color-light-gray); 311 --table--has-background-text-color: var(--global--color-dark-gray); 312 313 /* Widgets */ 314 --widget--line-height-list: 1.9; 315 --widget--line-height-title: 1.4; 316 --widget--font-weight-title: 700; 317 --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); 318 319 /* Admin-bar height */ 320 --global--admin-bar--height: 0px; 321 } 322 323 .admin-bar { 324 --global--admin-bar--height: 32px; 325 } 326 @media only screen and (max-width: 782px) { 327 328 .admin-bar { 329 --global--admin-bar--height: 46px; 330 } 331 } 332 333 @media only screen and (min-width: 652px) { 334 335 :root { 336 --global--font-size-xl: 2.5rem; 337 --global--font-size-xxl: 6rem; 338 --global--font-size-xxxl: 9rem; 339 --heading--font-size-h3: 2rem; 340 --heading--font-size-h2: 3rem; 341 } 342 } 343 344 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 345 346 /* Document 347 ========================================================================== */ 348 349 /** 350 * 1. Correct the line height in all browsers. 351 * 2. Prevent adjustments of font size after orientation changes in iOS. 352 */ 353 html { 354 line-height: 1.15; 355 356 /* 1 */ 357 -webkit-text-size-adjust: 100%; 358 359 /* 2 */ 360 } 361 362 /* Sections 363 ========================================================================== */ 364 365 /** 366 * Remove the margin in all browsers. 367 */ 368 body { 369 margin: 0; 370 } 371 372 /** 373 * Render the `main` element consistently in IE. 374 */ 375 main { 376 display: block; 377 } 378 379 /** 380 * Correct the font size and margin on `h1` elements within `section` and 381 * `article` contexts in Chrome, Firefox, and Safari. 382 */ 383 h1 { 384 font-size: 2em; 385 margin: 0.67em 0; 386 } 387 388 /* Grouping content 389 ========================================================================== */ 390 391 /** 392 * 1. Add the correct box sizing in Firefox. 393 * 2. Show the overflow in Edge and IE. 394 */ 395 hr { 396 box-sizing: content-box; 397 398 /* 1 */ 399 height: 0; 400 401 /* 1 */ 402 overflow: visible; 403 404 /* 2 */ 405 } 406 407 /** 408 * 1. Correct the inheritance and scaling of font size in all browsers. 409 * 2. Correct the odd `em` font sizing in all browsers. 410 */ 411 pre { 412 font-family: monospace; 413 414 /* 1 */ 415 font-size: 1em; 416 417 /* 2 */ 418 } 419 420 /* Text-level semantics 421 ========================================================================== */ 422 423 /** 424 * Remove the gray background on active links in IE 10. 425 */ 426 a { 427 background-color: transparent; 428 text-decoration-thickness: 1px; 429 } 430 431 /** 432 * 1. Remove the bottom border in Chrome 57- 433 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 434 */ 435 abbr[title] { 436 border-bottom: none; 437 438 /* 1 */ 439 text-decoration: underline; 440 441 /* 2 */ 442 text-decoration-style: dotted; 443 444 /* 2 */ 445 } 446 447 /** 448 * Add the correct font weight in Chrome, Edge, and Safari. 449 */ 450 b, 451 strong { 452 font-weight: bolder; 453 } 454 455 /** 456 * 1. Correct the inheritance and scaling of font size in all browsers. 457 * 2. Correct the odd `em` font sizing in all browsers. 458 */ 459 code, 460 kbd, 461 samp { 462 font-family: monospace; 463 464 /* 1 */ 465 font-size: 1em; 466 467 /* 2 */ 468 } 469 470 /** 471 * Add the correct font size in all browsers. 472 */ 473 small { 474 font-size: 80%; 475 } 476 477 /** 478 * Prevent `sub` and `sup` elements from affecting the line height in 479 * all browsers. 480 */ 481 sub, 482 sup { 483 font-size: 75%; 484 line-height: 0; 485 position: relative; 486 vertical-align: baseline; 487 } 488 489 sub { 490 bottom: -0.25em; 491 } 492 493 sup { 494 top: -0.5em; 495 } 496 497 /* Embedded content 498 ========================================================================== */ 499 500 /** 501 * Remove the border on images inside links in IE 10. 502 */ 503 img { 504 border-style: none; 505 } 506 507 /* Forms 508 ========================================================================== */ 509 510 /** 511 * 1. Change the font styles in all browsers. 512 * 2. Remove the margin in Firefox and Safari. 513 */ 514 button, 515 input, 516 optgroup, 517 select, 518 textarea { 519 font-family: inherit; 520 521 /* 1 */ 522 font-size: 100%; 523 524 /* 1 */ 525 line-height: 1.15; 526 527 /* 1 */ 528 margin: 0; 529 530 /* 2 */ 531 } 532 533 /** 534 * Show the overflow in IE. 535 * 1. Show the overflow in Edge. 536 */ 537 button, 538 input { 539 540 /* 1 */ 541 overflow: visible; 542 } 543 544 /** 545 * Remove the inheritance of text transform in Edge, Firefox, and IE. 546 * 1. Remove the inheritance of text transform in Firefox. 547 */ 548 button, 549 select { 550 551 /* 1 */ 552 text-transform: none; 553 } 554 555 /** 556 * Correct the inability to style clickable types in iOS and Safari. 557 */ 558 button, 559 [type=button], 560 [type=reset], 561 [type=submit] { 562 -webkit-appearance: button; 563 } 564 565 /** 566 * Remove the inner border and padding in Firefox. 567 */ 568 button::-moz-focus-inner, 569 [type=button]::-moz-focus-inner, 570 [type=reset]::-moz-focus-inner, 571 [type=submit]::-moz-focus-inner { 572 border-style: none; 573 padding: 0; 574 } 575 576 /** 577 * Restore the focus styles unset by the previous rule. 578 */ 579 button:-moz-focusring, 580 [type=button]:-moz-focusring, 581 [type=reset]:-moz-focusring, 582 [type=submit]:-moz-focusring { 583 outline: 1px dotted ButtonText; 584 } 585 586 /** 587 * Correct the padding in Firefox. 588 */ 589 fieldset { 590 padding: 0.35em 0.75em 0.625em; 591 } 592 593 /** 594 * 1. Correct the text wrapping in Edge and IE. 595 * 2. Correct the color inheritance from `fieldset` elements in IE. 596 * 3. Remove the padding so developers are not caught out when they zero out 597 * `fieldset` elements in all browsers. 598 */ 599 legend { 600 box-sizing: border-box; 601 602 /* 1 */ 603 color: inherit; 604 605 /* 2 */ 606 display: table; 607 608 /* 1 */ 609 max-width: 100%; 610 611 /* 1 */ 612 padding: 0; 613 614 /* 3 */ 615 white-space: normal; 616 617 /* 1 */ 618 } 619 620 /** 621 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 622 */ 623 progress { 624 vertical-align: baseline; 625 } 626 627 /** 628 * Remove the default vertical scrollbar in IE 10+. 629 */ 630 textarea { 631 overflow: auto; 632 } 633 634 /** 635 * 1. Add the correct box sizing in IE 10. 636 * 2. Remove the padding in IE 10. 637 */ 638 [type=checkbox], 639 [type=radio] { 640 box-sizing: border-box; 641 642 /* 1 */ 643 padding: 0; 644 645 /* 2 */ 646 } 647 648 /** 649 * Correct the cursor style of increment and decrement buttons in Chrome. 650 */ 651 [type=number]::-webkit-inner-spin-button, 652 [type=number]::-webkit-outer-spin-button { 653 height: auto; 654 } 655 656 /** 657 * 1. Correct the odd appearance in Chrome and Safari. 658 * 2. Correct the outline style in Safari. 659 */ 660 [type=search] { 661 -webkit-appearance: textfield; 662 663 /* 1 */ 664 outline-offset: -2px; 665 666 /* 2 */ 667 } 668 669 /** 670 * Remove the inner padding in Chrome and Safari on macOS. 671 */ 672 [type=search]::-webkit-search-decoration { 673 -webkit-appearance: none; 674 } 675 676 /** 677 * 1. Correct the inability to style clickable types in iOS and Safari. 678 * 2. Change font properties to `inherit` in Safari. 679 */ 680 ::-webkit-file-upload-button { 681 -webkit-appearance: button; 682 683 /* 1 */ 684 font: inherit; 685 686 /* 2 */ 687 } 688 689 /* Interactive 690 ========================================================================== */ 691 692 /* 693 * Add the correct display in Edge, IE 10+, and Firefox. 694 */ 695 details { 696 display: block; 697 } 698 699 /* 700 * Add the correct display in all browsers. 701 */ 702 summary { 703 display: list-item; 704 } 705 706 /* Misc 707 ========================================================================== */ 708 709 /** 710 * Add the correct display in IE 10+. 711 */ 712 template { 713 display: none; 714 } 715 716 /** 717 * Add the correct display in IE 10. 718 */ 719 [hidden] { 720 display: none; 721 } 722 723 /** 724 * Responsive Styles 725 */ 726 727 /** 728 * Required Variables 729 */ 730 731 /** 732 * Root Media Query Variables 733 */ 734 :root { 735 --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); 736 --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); 737 --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); 738 --responsive--alignfull-width: 100%; 739 --responsive--alignright-margin: var(--global--spacing-horizontal); 740 --responsive--alignleft-margin: var(--global--spacing-horizontal); 741 } 742 743 @media only screen and (min-width: 482px) { 744 745 :root { 746 --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); 747 --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); 748 --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 749 --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 750 } 751 } 752 @media only screen and (min-width: 822px) { 753 754 :root { 755 --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); 756 --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); 757 } 758 } 759 760 /** 761 * Extends 762 */ 763 .post-thumbnail, 764 .entry-content .wp-audio-shortcode, 765 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 766 *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 767 .default-max-width { 768 max-width: var(--responsive--aligndefault-width); 769 margin-left: auto; 770 margin-right: auto; 771 } 772 773 .widget-area, 774 .pagination, 775 .comments-pagination, 776 .post-navigation, 777 .site-footer, 778 .site-header, 779 .alignwide, 780 .wide-max-width { 781 max-width: var(--responsive--alignwide-width); 782 margin-left: auto; 783 margin-right: auto; 784 } 785 786 .alignfull, 787 .wp-block-group .wp-block-group__inner-container > *.alignfull, 788 .full-max-width { 789 max-width: var(--responsive--alignfull-width); 790 width: var(--responsive--alignfull-width); 791 margin-left: auto; 792 margin-right: auto; 793 } 794 795 @media only screen and (min-width: 482px) { 796 797 .alignfull, 798 .full-max-width { 799 max-width: var(--responsive--alignfull-width); 800 width: auto; 801 margin-left: auto; 802 margin-right: auto; 803 } 804 } 805 806 .entry-header .post-thumbnail, 807 .singular .post-thumbnail, 808 .alignfull [class*=inner-container] > .alignwide, 809 .alignwide [class*=inner-container] > .alignwide { 810 margin-left: auto; 811 margin-right: auto; 812 width: var(--responsive--alignwide-width); 813 max-width: var(--responsive--alignfull-width); 814 } 815 816 @media only screen and (min-width: 482px) { 817 818 .entry-content > .alignleft { 819 820 /*rtl:ignore*/ 821 margin-left: var(--responsive--alignleft-margin); 822 823 /*rtl:ignore*/ 824 margin-right: var(--global--spacing-horizontal); 825 } 826 } 827 @media only screen and (min-width: 482px) { 828 829 .entry-content > .alignright { 830 831 /*rtl:ignore*/ 832 margin-left: var(--global--spacing-horizontal); 833 834 /*rtl:ignore*/ 835 margin-right: var(--responsive--alignright-margin); 836 } 837 } 838 839 /** 840 * Site Structure 841 * 842 * - Set vertical margins and responsive widths on 843 * top-level wrappers and content wrappers 844 * - `--global--width-content` is a responsive variable 845 * - See: globals/_global-width-responsive.scss 846 */ 847 848 /** 849 * Top Level Wrappers (header, main, footer) 850 * - Set vertical padding and horizontal margins 851 */ 852 .site-header, 853 .site-main, 854 .widget-area, 855 .site-footer { 856 padding-top: var(--global--spacing-vertical); 857 padding-bottom: var(--global--spacing-vertical); 858 margin-left: auto; 859 margin-right: auto; 860 } 861 862 .site-header { 863 padding-top: calc(0.75 * var(--global--spacing-vertical)); 864 padding-bottom: calc(2 * var(--global--spacing-vertical)); 865 } 866 @media only screen and (min-width: 482px) { 867 868 .site-header { 869 padding-bottom: calc(3 * var(--global--spacing-vertical)); 870 } 871 } 872 873 /** 874 * Site-main children wrappers 875 * - Add double vertical margins here for clearer hierarchy 876 */ 877 .site-main > * { 878 margin-top: calc(3 * var(--global--spacing-vertical)); 879 margin-bottom: calc(3 * var(--global--spacing-vertical)); 880 } 881 882 .site-main > *:first-child { 883 margin-top: 0; 884 } 885 886 .site-main > *:last-child { 887 margin-bottom: 0; 888 } 889 890 /** 891 * Set the default maximum responsive content-width 892 */ 893 894 /** 895 * Set the wide maximum responsive content-width 896 */ 897 898 /** 899 * Set the full maximum responsive content-width 900 */ 901 902 /* 903 * Block & non-gutenberg content wrappers 904 * - Set margins 905 */ 906 .entry-header, 907 .post-thumbnail, 908 .entry-content, 909 .entry-footer, 910 .author-bio { 911 margin-top: var(--global--spacing-vertical); 912 margin-right: auto; 913 margin-bottom: var(--global--spacing-vertical); 914 margin-left: auto; 915 } 916 917 /* 918 * Block & non-gutenberg content wrapper children 919 * - Sets spacing-vertical margin logic 920 */ 921 .site-main > article > *, 922 .site-main > .not-found > *, 923 .entry-content > *, 924 [class*=inner-container] > *, 925 .wp-block-template-part > *, 926 .wp-block-post-template :where(li > *) { 927 margin-top: calc(0.666 * var(--global--spacing-vertical)); 928 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 929 } 930 @media only screen and (min-width: 482px) { 931 932 .site-main > article > *, 933 .site-main > .not-found > *, 934 .entry-content > *, 935 [class*=inner-container] > *, 936 .wp-block-template-part > *, 937 .wp-block-post-template :where(li > *) { 938 margin-top: var(--global--spacing-vertical); 939 margin-bottom: var(--global--spacing-vertical); 940 } 941 } 942 943 .site-main > article > *:first-child, 944 .site-main > .not-found > *:first-child, 945 .entry-content > *:first-child, 946 [class*=inner-container] > *:first-child, 947 .wp-block-template-part > *:first-child, 948 .wp-block-post-template :where(li > *):first-child { 949 margin-top: 0; 950 } 951 952 .site-main > article > *:last-child, 953 .site-main > .not-found > *:last-child, 954 .entry-content > *:last-child, 955 [class*=inner-container] > *:last-child, 956 .wp-block-template-part > *:last-child, 957 .wp-block-post-template :where(li > *):last-child { 958 margin-bottom: 0; 959 } 960 961 .site-footer > *, 962 .widget-area > * { 963 margin-top: calc(0.666 * var(--global--spacing-vertical)); 964 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 965 } 966 @media only screen and (min-width: 482px) { 967 968 .site-footer > *, 969 .widget-area > * { 970 margin-top: var(--global--spacing-vertical); 971 margin-bottom: var(--global--spacing-vertical); 972 } 973 } 974 975 /* 976 * Block & non-gutenberg content wrapper children 977 * - Sets spacing-unit margins 978 */ 979 .entry-header > *, 980 .post-thumbnail > *, 981 .page-content > *, 982 .comment-content > *, 983 .widget > * { 984 margin-top: var(--global--spacing-unit); 985 margin-bottom: var(--global--spacing-unit); 986 } 987 988 .entry-header > *:first-child, 989 .post-thumbnail > *:first-child, 990 .page-content > *:first-child, 991 .comment-content > *:first-child, 992 .widget > *:first-child { 993 margin-top: 0; 994 } 995 996 .entry-header > *:last-child, 997 .post-thumbnail > *:last-child, 998 .page-content > *:last-child, 999 .comment-content > *:last-child, 1000 .widget > *:last-child { 1001 margin-bottom: 0; 1002 } 1003 1004 /* 1005 * .entry-content children specific controls 1006 * - Adds special margin overrides for alignment utility classes 1007 */ 1008 .entry-content > * { 1009 1010 /* Reset alignleft and alignright margins after alignfull */ 1011 } 1012 1013 .entry-content > *.alignleft, 1014 .entry-content > *.alignright, 1015 .entry-content > *.alignleft:first-child + *, 1016 .entry-content > *.alignright:first-child + *, 1017 .entry-content > *.alignfull.has-background { 1018 margin-top: 0; 1019 } 1020 1021 .entry-content > *:last-child, 1022 .entry-content > *.alignfull.has-background { 1023 margin-bottom: 0; 1024 } 1025 1026 .entry-content > *.alignfull + .alignleft, 1027 .entry-content > *.alignfull + .alignright { 1028 margin-top: var(--global--spacing-vertical); 1029 } 1030 1031 /** 1032 * Reset specific elements to make them easier to style in other contexts. 1033 */ 1034 html, 1035 body, 1036 p, 1037 ol, 1038 ul, 1039 li, 1040 dl, 1041 dt, 1042 dd, 1043 blockquote, 1044 figure, 1045 fieldset, 1046 form, 1047 legend, 1048 textarea, 1049 pre, 1050 iframe, 1051 hr, 1052 h1, 1053 h2, 1054 h3, 1055 h4, 1056 h5, 1057 h6 { 1058 padding: 0; 1059 margin: 0; 1060 -moz-osx-font-smoothing: grayscale; 1061 -webkit-font-smoothing: antialiased; 1062 } 1063 1064 /** 1065 * Apply generic border-box to all elements. 1066 * See: 1067 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ 1068 */ 1069 html { 1070 1071 /* Apply border-box across the entire page. */ 1072 box-sizing: border-box; 1073 font-family: var(--global--font-secondary); 1074 line-height: var(--global--line-height-body); 1075 } 1076 1077 /** 1078 * Relax the definition a bit, to allow components to override it manually. 1079 */ 1080 *, 1081 *::before, 1082 *::after { 1083 box-sizing: inherit; 1084 } 1085 1086 body { 1087 font-size: var(--global--font-size-base); 1088 font-weight: normal; 1089 color: var(--global--color-primary); 1090 text-align: left; 1091 background-color: var(--global--color-background); 1092 } 1093 1094 button { 1095 cursor: pointer; 1096 } 1097 1098 .clear:before, 1099 .clear:after, 1100 .entry-content:before, 1101 .entry-content:after, 1102 .comment-content:before, 1103 .comment-content:after, 1104 .site-header:before, 1105 .site-header:after, 1106 .site-content:before, 1107 .site-content:after, 1108 .site-footer:before, 1109 .site-footer:after { 1110 content: ""; 1111 display: table; 1112 table-layout: fixed; 1113 } 1114 1115 .clear:after, 1116 .entry-content:after, 1117 .comment-content:after, 1118 .site-header:after, 1119 .site-content:after, 1120 .site-footer:after { 1121 clear: both; 1122 } 1123 1124 /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ 1125 blockquote { 1126 padding: 0; 1127 position: relative; 1128 margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); 1129 } 1130 1131 blockquote > * { 1132 margin-top: var(--global--spacing-unit); 1133 margin-bottom: var(--global--spacing-unit); 1134 } 1135 1136 blockquote > *:first-child { 1137 margin-top: 0; 1138 } 1139 1140 blockquote > *:last-child { 1141 margin-bottom: 0; 1142 } 1143 1144 blockquote p { 1145 letter-spacing: var(--heading--letter-spacing-h4); 1146 font-family: var(--quote--font-family); 1147 font-size: var(--quote--font-size); 1148 font-style: var(--quote--font-style); 1149 font-weight: var(--quote--font-weight); 1150 line-height: var(--quote--line-height); 1151 } 1152 1153 blockquote cite, 1154 blockquote footer { 1155 font-weight: normal; 1156 color: var(--global--color-primary); 1157 font-size: var(--global--font-size-xs); 1158 letter-spacing: var(--global--letter-spacing); 1159 } 1160 1161 blockquote.alignleft, 1162 blockquote.alignright { 1163 padding-left: inherit; 1164 } 1165 1166 blockquote.alignleft p, 1167 blockquote.alignright p { 1168 font-size: var(--heading--font-size-h5); 1169 max-width: inherit; 1170 width: inherit; 1171 } 1172 1173 blockquote.alignleft cite, 1174 blockquote.alignleft footer, 1175 blockquote.alignright cite, 1176 blockquote.alignright footer { 1177 font-size: var(--global--font-size-xs); 1178 letter-spacing: var(--global--letter-spacing); 1179 } 1180 1181 blockquote strong { 1182 font-weight: var(--quote--font-weight-strong); 1183 } 1184 1185 blockquote:before { 1186 content: "“"; 1187 font-size: var(--quote--font-size); 1188 line-height: var(--quote--line-height); 1189 position: absolute; 1190 left: calc(-0.5 * var(--global--spacing-horizontal)); 1191 } 1192 1193 blockquote .wp-block-quote__citation, 1194 blockquote cite, 1195 blockquote footer { 1196 color: var(--global--color-primary); 1197 font-size: var(--global--font-size-xs); 1198 font-style: var(--quote--font-style-cite); 1199 } 1200 @media only screen and (max-width: 481px) { 1201 1202 blockquote { 1203 padding-left: calc(0.5 * var(--global--spacing-horizontal)); 1204 } 1205 1206 blockquote:before { 1207 left: 0; 1208 } 1209 } 1210 1211 input[type=text], 1212 input[type=email], 1213 input[type=url], 1214 input[type=password], 1215 input[type=search], 1216 input[type=number], 1217 input[type=tel], 1218 input[type=date], 1219 input[type=month], 1220 input[type=week], 1221 input[type=time], 1222 input[type=datetime], 1223 input[type=datetime-local], 1224 input[type=color], 1225 .site textarea { 1226 border: var(--form--border-width) solid var(--form--border-color); 1227 border-radius: var(--form--border-radius); 1228 color: var(--form--color-text); 1229 line-height: var(--global--line-height-body); 1230 padding: var(--form--spacing-unit); 1231 margin: 0 2px; 1232 max-width: 100%; 1233 } 1234 1235 input[type=text]:focus, 1236 input[type=email]:focus, 1237 input[type=url]:focus, 1238 input[type=password]:focus, 1239 input[type=search]:focus, 1240 input[type=number]:focus, 1241 input[type=tel]:focus, 1242 input[type=date]:focus, 1243 input[type=month]:focus, 1244 input[type=week]:focus, 1245 input[type=time]:focus, 1246 input[type=datetime]:focus, 1247 input[type=datetime-local]:focus, 1248 input[type=color]:focus, 1249 .site textarea:focus { 1250 color: var(--form--color-text); 1251 outline-offset: 2px; 1252 outline: 2px dotted var(--form--border-color); 1253 } 1254 1255 input[type=text]:disabled, 1256 input[type=email]:disabled, 1257 input[type=url]:disabled, 1258 input[type=password]:disabled, 1259 input[type=search]:disabled, 1260 input[type=number]:disabled, 1261 input[type=tel]:disabled, 1262 input[type=date]:disabled, 1263 input[type=month]:disabled, 1264 input[type=week]:disabled, 1265 input[type=time]:disabled, 1266 input[type=datetime]:disabled, 1267 input[type=datetime-local]:disabled, 1268 input[type=color]:disabled, 1269 .site textarea:disabled { 1270 opacity: 0.7; 1271 } 1272 1273 .is-dark-theme input[type=text], 1274 .is-dark-theme input[type=email], 1275 .is-dark-theme input[type=url], 1276 .is-dark-theme input[type=password], 1277 .is-dark-theme input[type=search], 1278 .is-dark-theme input[type=number], 1279 .is-dark-theme input[type=tel], 1280 .is-dark-theme input[type=date], 1281 .is-dark-theme input[type=month], 1282 .is-dark-theme input[type=week], 1283 .is-dark-theme input[type=time], 1284 .is-dark-theme input[type=datetime], 1285 .is-dark-theme input[type=datetime-local], 1286 .is-dark-theme input[type=color], 1287 .is-dark-theme .site textarea { 1288 background: var(--global--color-white-90); 1289 } 1290 1291 input[type=search]:focus { 1292 outline-offset: -7px; 1293 } 1294 1295 .is-dark-theme input[type=search]:focus { 1296 outline-color: var(--global--color-background); 1297 } 1298 1299 input[type=color] { 1300 padding: calc(var(--form--spacing-unit) / 2); 1301 height: calc(4 * var(--form--spacing-unit)); 1302 } 1303 1304 input[type=email], 1305 input[type=url] { 1306 1307 /*rtl:ignore*/ 1308 direction: ltr; 1309 } 1310 1311 select { 1312 border: var(--form--border-width) solid var(--form--border-color); 1313 color: var(--form--color-text); 1314 -moz-appearance: none; 1315 -webkit-appearance: none; 1316 appearance: none; 1317 line-height: var(--global--line-height-body); 1318 padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); 1319 background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; 1320 background-position: right var(--form--spacing-unit) top 60%; 1321 } 1322 1323 select:focus { 1324 outline-offset: 2px; 1325 outline: 2px dotted var(--form--border-color); 1326 } 1327 1328 .is-dark-theme select { 1329 background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; 1330 background-position: right var(--form--spacing-unit) top 60%; 1331 } 1332 1333 textarea { 1334 width: 100%; 1335 } 1336 1337 label { 1338 font-size: var(--form--font-size); 1339 font-weight: var(--form--label-weight); 1340 margin-bottom: calc(var(--global--spacing-vertical) / 3); 1341 } 1342 1343 /** 1344 https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ 1345 https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. 1346 License: MIT. 1347 */ 1348 @supports (-webkit-appearance: none) or (-moz-appearance: none) { 1349 1350 input[type=checkbox], 1351 input[type=radio] { 1352 -webkit-appearance: none; 1353 -moz-appearance: none; 1354 position: relative; 1355 width: 25px; 1356 height: 25px; 1357 border: var(--form--border-width) solid var(--form--border-color); 1358 background: var(--global--color-white); 1359 } 1360 1361 input[type=checkbox]:disabled, 1362 input[type=radio]:disabled { 1363 opacity: 0.7; 1364 } 1365 1366 .is-dark-theme input[type=checkbox], 1367 .is-dark-theme input[type=radio] { 1368 background: var(--global--color-white-90); 1369 } 1370 1371 input[type=checkbox]:focus { 1372 outline-offset: 2px; 1373 outline: 2px dotted var(--form--border-color); 1374 } 1375 1376 input[type=checkbox]:after { 1377 content: ""; 1378 opacity: 0; 1379 display: block; 1380 left: 5px; 1381 top: 2px; 1382 position: absolute; 1383 width: 7px; 1384 height: 13px; 1385 border: 3px solid var(--form--color-text); 1386 border-top: 0; 1387 border-left: 0; 1388 transform: rotate(30deg); 1389 } 1390 1391 input[type=checkbox]:checked { 1392 color: var(--form--color-text); 1393 } 1394 1395 input[type=checkbox]:checked:after { 1396 opacity: 1; 1397 } 1398 1399 input[type=radio] { 1400 border-radius: 50%; 1401 } 1402 1403 input[type=radio]:focus { 1404 outline-offset: 2px; 1405 outline: 2px dotted var(--form--border-color); 1406 } 1407 1408 input[type=radio]:after { 1409 content: ""; 1410 opacity: 0; 1411 display: block; 1412 left: 3px; 1413 top: 3px; 1414 position: absolute; 1415 width: 11px; 1416 height: 11px; 1417 border-radius: 50%; 1418 background: var(--form--color-text); 1419 } 1420 1421 input[type=radio]:checked { 1422 border: 4px solid var(--form--border-color); 1423 } 1424 1425 input[type=radio]:checked:after { 1426 opacity: 1; 1427 } 1428 1429 input[type=radio]:checked:focus { 1430 outline-offset: 4px; 1431 outline: 2px dotted var(--form--border-color); 1432 } 1433 } 1434 1435 input[type=checkbox] + label, 1436 input[type=radio] + label { 1437 display: inline-block; 1438 padding-left: 10px; 1439 font-size: var(--global--font-size-xs); 1440 vertical-align: top; 1441 } 1442 1443 /** 1444 * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 1445 */ 1446 @supports (-webkit-appearance: none) or (-moz-appearance: none) { 1447 1448 input[type=range] { 1449 -webkit-appearance: none; 1450 1451 /* Hides the slider so that custom slider can be made */ 1452 width: 100%; 1453 1454 /* Specific width is required for Firefox. */ 1455 height: 6px; 1456 background: var(--form--color-ranged); 1457 border-radius: 6px; 1458 outline-offset: 10px; 1459 } 1460 1461 input[type=range]:disabled { 1462 opacity: 0.7; 1463 } 1464 1465 input[type=range]::-webkit-slider-thumb { 1466 -webkit-appearance: none; 1467 border: 3px solid var(--form--color-ranged); 1468 height: 44px; 1469 width: 44px; 1470 border-radius: 50%; 1471 background: var(--global--color-background); 1472 cursor: pointer; 1473 } 1474 1475 input[type=range]::-moz-range-thumb { 1476 border: 3px solid var(--form--color-ranged); 1477 height: 44px; 1478 width: 44px; 1479 border-radius: 50%; 1480 background: var(--global--color-background); 1481 cursor: pointer; 1482 box-sizing: border-box; 1483 } 1484 } 1485 1486 input[type=range]::-ms-track { 1487 width: 100%; 1488 height: 6px; 1489 border-radius: 6px; 1490 border-width: 19px 0; 1491 border-color: var(--global--color-background); 1492 background: transparent; 1493 color: transparent; 1494 cursor: pointer; 1495 } 1496 1497 input[type=range]::-ms-fill-upper { 1498 background: var(--form--color-ranged); 1499 border-radius: 6px; 1500 } 1501 1502 input[type=range]::-ms-fill-lower { 1503 background: var(--form--color-ranged); 1504 border-radius: 6px; 1505 } 1506 1507 input[type=range]::-ms-thumb { 1508 border: 3px solid var(--form--color-ranged); 1509 height: 44px; 1510 width: 44px; 1511 border-radius: 50%; 1512 background: var(--global--color-background); 1513 cursor: pointer; 1514 } 1515 1516 fieldset { 1517 display: grid; 1518 border-color: var(--global--color-secondary); 1519 padding: var(--global--spacing-horizontal); 1520 } 1521 1522 fieldset legend { 1523 font-size: var(--global--font-size-lg); 1524 } 1525 1526 fieldset input[type=submit] { 1527 max-width: max-content; 1528 } 1529 1530 fieldset input:not([type=submit]) { 1531 margin-bottom: var(--global--spacing-unit); 1532 } 1533 1534 fieldset input[type=radio], 1535 fieldset input[type=checkbox] { 1536 margin-bottom: 0; 1537 } 1538 1539 fieldset input[type=radio] + label, 1540 fieldset input[type=checkbox] + label { 1541 font-size: var(--form--font-size); 1542 padding-left: 0; 1543 margin-bottom: var(--global--spacing-unit); 1544 } 1545 1546 ::-moz-placeholder { 1547 opacity: 1; 1548 } 1549 1550 .post-password-message { 1551 font-size: var(--global--font-size-lg); 1552 } 1553 1554 .post-password-form { 1555 display: flex; 1556 flex-wrap: wrap; 1557 } 1558 1559 .post-password-form__label { 1560 width: 100%; 1561 margin-bottom: 0; 1562 } 1563 1564 .post-password-form input[type=password] { 1565 flex-grow: 1; 1566 margin-top: calc(var(--global--spacing-vertical) / 3); 1567 margin-right: calc(0.66 * var(--global--spacing-horizontal)); 1568 } 1569 1570 .post-password-form__submit { 1571 margin-top: calc(var(--global--spacing-vertical) / 3); 1572 } 1573 @media only screen and (min-width: 592px) { 1574 1575 .post-password-form__submit { 1576 margin-left: calc(0.4 * var(--global--spacing-horizontal)); 1577 } 1578 } 1579 1580 img { 1581 height: auto; 1582 max-width: 100%; 1583 vertical-align: middle; 1584 } 1585 1586 /* Classic editor images */ 1587 .entry-content img { 1588 max-width: 100%; 1589 } 1590 1591 /* Make sure embeds and iframes fit their containers. */ 1592 embed, 1593 iframe, 1594 object, 1595 video { 1596 max-width: 100%; 1597 } 1598 1599 /* Media captions */ 1600 figcaption, 1601 .wp-caption, 1602 .wp-caption-text, 1603 .wp-block-embed figcaption { 1604 color: currentColor; 1605 font-size: var(--global--font-size-xs); 1606 line-height: var(--global--line-height-body); 1607 margin-top: calc(0.5 * var(--global--spacing-unit)); 1608 margin-bottom: var(--global--spacing-unit); 1609 text-align: center; 1610 } 1611 1612 .alignleft figcaption, 1613 .alignright figcaption, 1614 .alignleft .wp-caption, 1615 .alignright .wp-caption, 1616 .alignleft .wp-caption-text, 1617 .alignright .wp-caption-text, 1618 .alignleft .wp-block-embed figcaption, 1619 .alignright .wp-block-embed figcaption { 1620 margin-bottom: 0; 1621 } 1622 1623 /* WP Smiley */ 1624 .page-content .wp-smiley, 1625 .entry-content .wp-smiley, 1626 .comment-content .wp-smiley { 1627 border: none; 1628 margin-bottom: 0; 1629 margin-top: 0; 1630 padding: 0; 1631 } 1632 1633 /* Over here, place any elements that do not need to have their own file. */ 1634 b, 1635 strong { 1636 font-weight: 700; 1637 } 1638 1639 dfn, 1640 cite, 1641 em, 1642 i { 1643 font-style: italic; 1644 } 1645 1646 pre { 1647 white-space: pre; 1648 overflow-x: auto; 1649 } 1650 1651 /* 1652 * text-underline-offset doesn't work in Chrome at all 👎 1653 * But looks nice in Safari/Firefox, so let's keep it and 1654 * maybe Chrome will support it soon. 1655 */ 1656 a { 1657 cursor: pointer; 1658 color: var(--wp--style--color--link, var(--global--color-primary)); 1659 text-underline-offset: 3px; 1660 text-decoration-skip-ink: all; 1661 } 1662 1663 a:hover { 1664 text-decoration-style: dotted; 1665 text-decoration-skip-ink: none; 1666 } 1667 1668 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1669 1670 /* Only visible in Windows High Contrast mode */ 1671 outline: 2px solid transparent; 1672 text-decoration: underline 1px dotted currentColor; 1673 text-decoration-skip-ink: none; 1674 background: rgba(255, 255, 255, 0.9); 1675 } 1676 1677 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1678 background: var(--global--color-black); 1679 color: var(--global--color-white); 1680 text-decoration: none; 1681 } 1682 1683 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 1684 color: var(--wp--style--color--link, var(--global--color-white)); 1685 } 1686 1687 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1688 background: rgba(0, 0, 0, 0.9); 1689 color: var(--wp--style--color--link, var(--global--color-white)); 1690 } 1691 1692 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 1693 color: var(--wp--style--color--link, var(--global--color-white)); 1694 } 1695 1696 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { 1697 1698 /* Only visible in Windows High Contrast mode */ 1699 outline: 2px solid transparent; 1700 outline-offset: -2px; 1701 } 1702 1703 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { 1704 color: #21759b; 1705 background-color: #f1f1f1; 1706 } 1707 1708 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link { 1709 background: none; 1710 } 1711 1712 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { 1713 outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); 1714 } 1715 1716 .has-background .has-link-color a, 1717 .has-background.has-link-color a { 1718 color: var(--wp--style--color--link, var(--global--color-primary)); 1719 } 1720 1721 /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ 1722 .wp-block-audio audio:focus { 1723 outline-offset: 5px; 1724 outline: 2px solid var(--global--color-primary); 1725 } 1726 1727 /** 1728 * Button 1729 */ 1730 .site .button, 1731 button, 1732 input[type=submit], 1733 input[type=reset], 1734 .wp-block-search .wp-block-search__button, 1735 .wp-block-button .wp-block-button__link, 1736 .wp-block-file a.wp-block-file__button { 1737 border: var(--button--border-width) solid transparent; 1738 border-radius: var(--button--border-radius); 1739 cursor: pointer; 1740 font-weight: var(--button--font-weight); 1741 font-family: var(--button--font-family); 1742 font-size: var(--button--font-size); 1743 line-height: var(--button--line-height); 1744 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 1745 text-decoration: none; 1746 } 1747 1748 .site .button:not(:hover):not(:active):not(.has-text-color), 1749 button:not(:hover):not(:active):not(.has-text-color), 1750 input[type=submit]:not(:hover):not(:active):not(.has-text-color), 1751 input[type=reset]:not(:hover):not(:active):not(.has-text-color), 1752 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), 1753 .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1754 .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 1755 color: var(--global--color-background); 1756 } 1757 1758 .has-background .site .button:not(:hover):not(:active):not(.has-text-color), 1759 .has-background button:not(:hover):not(:active):not(.has-text-color), 1760 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color), 1761 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color), 1762 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), 1763 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1764 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 1765 color: var(--local--color-background, var(--global--color-primary)); 1766 } 1767 1768 .has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background, 1769 .has-background button:not(:hover):not(:active):not(.has-text-color).has-background, 1770 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background, 1771 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background, 1772 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background, 1773 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background, 1774 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { 1775 color: var(--global--color-primary); 1776 } 1777 1778 .site .button:not(:hover):not(:active):not(.has-background), 1779 button:not(:hover):not(:active):not(.has-background), 1780 input[type=submit]:not(:hover):not(:active):not(.has-background), 1781 input[type=reset]:not(:hover):not(:active):not(.has-background), 1782 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), 1783 .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1784 .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { 1785 background-color: var(--global--color-primary); 1786 } 1787 1788 .has-background .site .button:not(:hover):not(:active):not(.has-background), 1789 .has-background button:not(:hover):not(:active):not(.has-background), 1790 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background), 1791 .has-background input[type=reset]:not(:hover):not(:active):not(.has-background), 1792 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), 1793 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1794 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { 1795 background-color: var(--local--color-primary, var(--global--color-primary)); 1796 } 1797 1798 .site .button:hover, 1799 .site .button:active, 1800 button:hover, 1801 button:active, 1802 input[type=submit]:hover, 1803 input[type=submit]:active, 1804 input[type=reset]:hover, 1805 input[type=reset]:active, 1806 .wp-block-search .wp-block-search__button:hover, 1807 .wp-block-search .wp-block-search__button:active, 1808 .wp-block-button .wp-block-button__link:hover, 1809 .wp-block-button .wp-block-button__link:active, 1810 .wp-block-file a.wp-block-file__button:hover, 1811 .wp-block-file a.wp-block-file__button:active { 1812 background-color: transparent; 1813 border-color: currentColor; 1814 color: inherit; 1815 } 1816 1817 .site .button:focus, 1818 button:focus, 1819 input[type=submit]:focus, 1820 input[type=reset]:focus, 1821 .wp-block-search .wp-block-search__button:focus, 1822 .wp-block-button .wp-block-button__link:focus, 1823 .wp-block-file a.wp-block-file__button:focus { 1824 outline-offset: -6px; 1825 outline: 2px dotted currentColor; 1826 } 1827 1828 .site .button:disabled, 1829 button:disabled, 1830 input[type=submit]:disabled, 1831 input[type=reset]:disabled, 1832 .wp-block-search .wp-block-search__button:disabled, 1833 .wp-block-button .wp-block-button__link:disabled, 1834 .wp-block-file a.wp-block-file__button:disabled { 1835 background-color: var(--global--color-white-50); 1836 border-color: var(--global--color-white-50); 1837 color: var(--button--color-text-active); 1838 } 1839 1840 /** 1841 * Block Options 1842 */ 1843 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1844 color: var(--global--color-background); 1845 } 1846 1847 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1848 color: var(--local--color-background, var(--global--color-background)); 1849 } 1850 1851 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { 1852 color: var(--global--color-primary); 1853 } 1854 1855 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1856 background-color: var(--global--color-primary); 1857 } 1858 1859 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1860 background-color: var(--local--color-primary, var(--global--color-primary)); 1861 } 1862 1863 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, 1864 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { 1865 border-color: currentColor !important; 1866 background-color: transparent !important; 1867 color: inherit !important; 1868 } 1869 1870 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1871 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1872 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background { 1873 border-color: currentColor; 1874 } 1875 1876 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1877 color: var(--global--color-primary); 1878 } 1879 1880 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1881 color: var(--local--color-primary, var(--global--color-primary)); 1882 } 1883 1884 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) { 1885 color: inherit; 1886 } 1887 1888 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1889 background-color: transparent; 1890 } 1891 1892 .wp-block-button.is-style-outline .wp-block-button__link:hover, 1893 .wp-block-button.is-style-outline .wp-block-button__link:active { 1894 border-color: transparent !important; 1895 background-color: var(--global--color-primary) !important; 1896 color: var(--global--color-background) !important; 1897 } 1898 1899 .has-background .wp-block-button.is-style-outline .wp-block-button__link:hover, 1900 .has-background .wp-block-button.is-style-outline .wp-block-button__link:active { 1901 background-color: var(--local--color-primary, var(--global--color-primary)) !important; 1902 color: var(--local--color-background, var(--global--color-background)) !important; 1903 } 1904 1905 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover, 1906 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { 1907 color: var(--local--color-background, var(--global--color-background)) !important; 1908 } 1909 1910 .wp-block-button .is-style-squared .wp-block-button__link { 1911 border-radius: 0; 1912 } 1913 1914 .is-style-outline .wp-block-button__link[style*=radius]:focus, 1915 .wp-block-button a.wp-block-button__link[style*=radius]:focus { 1916 outline-offset: 2px; 1917 outline: 2px dotted var(--button--color-background); 1918 } 1919 1920 .wp-block-code { 1921 border-color: var(--global--color-border); 1922 border-radius: 0; 1923 border-style: solid; 1924 border-width: 0.1rem; 1925 padding: var(--global--spacing-unit); 1926 } 1927 1928 .wp-block-code code { 1929 color: var(--global--color-primary); 1930 white-space: pre; 1931 overflow-x: auto; 1932 display: block; 1933 } 1934 1935 .wp-block-columns:not(.alignwide):not(.alignfull) { 1936 clear: both; 1937 } 1938 1939 .wp-block-columns .wp-block-column > * { 1940 margin-top: calc(0.66 * var(--global--spacing-vertical)); 1941 margin-bottom: calc(0.66 * var(--global--spacing-vertical)); 1942 } 1943 @media only screen and (min-width: 482px) { 1944 1945 .wp-block-columns .wp-block-column > * { 1946 margin-top: var(--global--spacing-vertical); 1947 margin-bottom: var(--global--spacing-vertical); 1948 } 1949 } 1950 1951 .wp-block-columns .wp-block-column > *:first-child { 1952 margin-top: 0; 1953 } 1954 1955 .wp-block-columns .wp-block-column > *:last-child { 1956 margin-bottom: 0; 1957 } 1958 1959 .wp-block-columns .wp-block-column:last-child { 1960 margin-bottom: 0; 1961 } 1962 1963 .wp-block-columns .wp-block-column:not(:last-child) { 1964 margin-bottom: calc(0.66 * var(--global--spacing-vertical)); 1965 } 1966 @media only screen and (min-width: 482px) { 1967 1968 .wp-block-columns .wp-block-column:not(:last-child) { 1969 margin-bottom: var(--global--spacing-vertical); 1970 } 1971 } 1972 @media only screen and (min-width: 822px) { 1973 1974 .wp-block-columns .wp-block-column:not(:last-child) { 1975 margin-bottom: 0; 1976 } 1977 } 1978 1979 .wp-block-columns.is-style-twentytwentyone-columns-overlap { 1980 justify-content: space-around; 1981 } 1982 @media only screen and (min-width: 652px) { 1983 1984 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { 1985 margin-left: calc(-2 * var(--global--spacing-horizontal)); 1986 margin-top: calc(2.5 * var(--global--spacing-horizontal)); 1987 z-index: 2; 1988 } 1989 1990 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), 1991 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), 1992 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), 1993 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), 1994 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), 1995 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), 1996 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), 1997 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 1998 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), 1999 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { 2000 background-color: var(--global--color-background); 2001 padding: var(--global--spacing-unit); 2002 } 2003 2004 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 2005 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { 2006 padding-left: calc(2 * var(--global--spacing-horizontal)); 2007 } 2008 2009 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { 2010 margin-top: 0; 2011 } 2012 } 2013 2014 .wp-block-columns.alignfull .wp-block-column p:not(.has-background), 2015 .wp-block-columns.alignfull .wp-block-column h1:not(.has-background), 2016 .wp-block-columns.alignfull .wp-block-column h2:not(.has-background), 2017 .wp-block-columns.alignfull .wp-block-column h3:not(.has-background), 2018 .wp-block-columns.alignfull .wp-block-column h4:not(.has-background), 2019 .wp-block-columns.alignfull .wp-block-column h5:not(.has-background), 2020 .wp-block-columns.alignfull .wp-block-column h6:not(.has-background) { 2021 padding-left: var(--global--spacing-unit); 2022 padding-right: var(--global--spacing-unit); 2023 } 2024 2025 .wp-block-cover, 2026 .wp-block-cover-image { 2027 background-color: var(--cover--color-background); 2028 min-height: var(--cover--height); 2029 margin-top: inherit; 2030 margin-bottom: inherit; 2031 2032 /* default & custom background-color */ 2033 2034 /* Treating H2 separately to account for legacy /core styles */ 2035 2036 /* Block Styles */ 2037 2038 /* The background color class is used just for the overlay, and does not need to be applied to the inner container. */ 2039 } 2040 2041 .wp-block-cover:not(.alignwide):not(.alignfull), 2042 .wp-block-cover-image:not(.alignwide):not(.alignfull) { 2043 clear: both; 2044 } 2045 2046 .wp-block-cover.alignfull, 2047 .wp-block-cover-image.alignfull { 2048 margin-top: 0; 2049 margin-bottom: 0; 2050 } 2051 2052 .wp-block-cover .wp-block-cover__inner-container, 2053 .wp-block-cover .wp-block-cover-image-text, 2054 .wp-block-cover .wp-block-cover-text, 2055 .wp-block-cover-image .wp-block-cover__inner-container, 2056 .wp-block-cover-image .wp-block-cover-image-text, 2057 .wp-block-cover-image .wp-block-cover-text { 2058 color: currentColor; 2059 margin-top: var(--global--spacing-vertical); 2060 margin-bottom: var(--global--spacing-vertical); 2061 } 2062 2063 .wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), 2064 .wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2065 .wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2066 .wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), 2067 .wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2068 .wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { 2069 color: currentColor; 2070 } 2071 2072 .wp-block-cover .wp-block-cover__inner-container .has-link-color a, 2073 .wp-block-cover .wp-block-cover-image-text .has-link-color a, 2074 .wp-block-cover .wp-block-cover-text .has-link-color a, 2075 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, 2076 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a, 2077 .wp-block-cover-image .wp-block-cover-text .has-link-color a { 2078 color: var(--wp--style--color--link, var(--global--color-primary)); 2079 } 2080 2081 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, 2082 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, 2083 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text, 2084 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, 2085 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, 2086 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text { 2087 color: var(--cover--color-foreground); 2088 } 2089 2090 .wp-block-cover h2, 2091 .wp-block-cover-image h2 { 2092 font-size: var(--heading--font-size-h2); 2093 letter-spacing: var(--heading--letter-spacing-h2); 2094 line-height: var(--heading--line-height-h2); 2095 max-width: inherit; 2096 text-align: inherit; 2097 padding: 0; 2098 } 2099 2100 .wp-block-cover h2.has-text-align-left, 2101 .wp-block-cover-image h2.has-text-align-left { 2102 text-align: left; 2103 } 2104 2105 .wp-block-cover h2.has-text-align-center, 2106 .wp-block-cover-image h2.has-text-align-center { 2107 text-align: center; 2108 } 2109 2110 .wp-block-cover h2.has-text-align-right, 2111 .wp-block-cover-image h2.has-text-align-right { 2112 text-align: right; 2113 } 2114 2115 .wp-block-cover .wp-block-cover__inner-container, 2116 .wp-block-cover-image .wp-block-cover__inner-container { 2117 width: calc(100% - calc(2 * var(--global--spacing-vertical))); 2118 } 2119 2120 .wp-block-cover .wp-block-cover__inner-container > *, 2121 .wp-block-cover-image .wp-block-cover__inner-container > * { 2122 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2123 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2124 } 2125 @media only screen and (min-width: 482px) { 2126 2127 .wp-block-cover .wp-block-cover__inner-container > *, 2128 .wp-block-cover-image .wp-block-cover__inner-container > * { 2129 margin-top: var(--global--spacing-vertical); 2130 margin-bottom: var(--global--spacing-vertical); 2131 } 2132 } 2133 2134 .wp-block-cover .wp-block-cover__inner-container > *:first-child, 2135 .wp-block-cover-image .wp-block-cover__inner-container > *:first-child { 2136 margin-top: 0; 2137 } 2138 2139 .wp-block-cover .wp-block-cover__inner-container > *:last-child, 2140 .wp-block-cover-image .wp-block-cover__inner-container > *:last-child { 2141 margin-bottom: 0; 2142 } 2143 2144 .wp-block-cover.alignleft, 2145 .wp-block-cover.alignright, 2146 .wp-block-cover-image.alignleft, 2147 .wp-block-cover-image.alignright { 2148 margin-top: 0; 2149 } 2150 2151 .wp-block-cover.alignleft > *, 2152 .wp-block-cover.alignright > *, 2153 .wp-block-cover-image.alignleft > *, 2154 .wp-block-cover-image.alignright > * { 2155 margin-top: calc(2 * var(--global--spacing-vertical)); 2156 margin-bottom: calc(2 * var(--global--spacing-vertical)); 2157 padding-left: var(--global--spacing-horizontal); 2158 padding-right: var(--global--spacing-horizontal); 2159 width: 100%; 2160 } 2161 2162 .wp-block-cover.has-left-content, 2163 .wp-block-cover.has-right-content, 2164 .wp-block-cover-image.has-left-content, 2165 .wp-block-cover-image.has-right-content { 2166 justify-content: center; 2167 } 2168 2169 .wp-block-cover.is-style-twentytwentyone-border, 2170 .wp-block-cover-image.is-style-twentytwentyone-border { 2171 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2172 } 2173 2174 .wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container, 2175 .wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container { 2176 background-color: unset; 2177 } 2178 2179 .wp-block-file a.wp-block-file__button:active, 2180 .wp-block-file a.wp-block-file__button:focus, 2181 .wp-block-file a.wp-block-file__button:hover { 2182 opacity: inherit; 2183 } 2184 2185 .wp-block-file a.wp-block-file__button { 2186 display: inline-block; 2187 } 2188 2189 .wp-block-gallery { 2190 margin: 0 auto; 2191 } 2192 2193 .wp-block-gallery .blocks-gallery-image, 2194 .wp-block-gallery .blocks-gallery-item { 2195 width: calc((100% - var(--global--spacing-unit)) / 2); 2196 } 2197 2198 .wp-block-gallery .blocks-gallery-image figcaption, 2199 .wp-block-gallery .blocks-gallery-item figcaption { 2200 margin: 0; 2201 color: var(--global--color-white); 2202 font-size: var(--global--font-size-xs); 2203 } 2204 2205 .wp-block-gallery .blocks-gallery-image figcaption a, 2206 .wp-block-gallery .blocks-gallery-item figcaption a { 2207 color: var(--global--color-white); 2208 } 2209 2210 .wp-block-gallery .blocks-gallery-image figcaption a:focus, 2211 .wp-block-gallery .blocks-gallery-item figcaption a:focus { 2212 background-color: transparent; 2213 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 2214 text-decoration: none; 2215 } 2216 2217 .wp-block-gallery .blocks-gallery-image a:focus img, 2218 .wp-block-gallery .blocks-gallery-item a:focus img { 2219 outline-offset: 2px; 2220 } 2221 2222 .wp-block-group { 2223 display: block; 2224 clear: both; 2225 display: flow-root; 2226 } 2227 2228 .wp-block-group:before, 2229 .wp-block-group:after { 2230 content: ""; 2231 display: block; 2232 clear: both; 2233 } 2234 2235 .wp-block-group .wp-block-group__inner-container { 2236 margin-left: auto; 2237 margin-right: auto; 2238 } 2239 2240 .wp-block-group .wp-block-group__inner-container > * { 2241 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2242 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2243 } 2244 @media only screen and (min-width: 482px) { 2245 2246 .wp-block-group .wp-block-group__inner-container > * { 2247 margin-top: var(--global--spacing-vertical); 2248 margin-bottom: var(--global--spacing-vertical); 2249 } 2250 } 2251 2252 .wp-block-group .wp-block-group__inner-container > *:first-child { 2253 margin-top: 0; 2254 } 2255 2256 .wp-block-group .wp-block-group__inner-container > *:last-child { 2257 margin-bottom: 0; 2258 } 2259 2260 .wp-block-group.has-background { 2261 padding: calc(0.666 * var(--global--spacing-vertical)); 2262 } 2263 @media only screen and (min-width: 482px) { 2264 2265 .wp-block-group.has-background { 2266 padding: var(--global--spacing-vertical); 2267 } 2268 } 2269 2270 .wp-block-group.is-style-twentytwentyone-border { 2271 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2272 padding: var(--global--spacing-vertical); 2273 } 2274 2275 .wp-block-group.has-background .wp-block-group__inner-container > .alignfull, 2276 .wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, 2277 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, 2278 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { 2279 max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 2280 width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 2281 margin-left: calc(-1 * var(--global--spacing-vertical)); 2282 } 2283 2284 h1, 2285 .h1, 2286 h2, 2287 .h2, 2288 h3, 2289 .h3, 2290 h4, 2291 .h4, 2292 h5, 2293 .h5, 2294 h6, 2295 .h6 { 2296 clear: both; 2297 font-family: var(--heading--font-family); 2298 font-weight: var(--heading--font-weight); 2299 } 2300 2301 h1 strong, 2302 .h1 strong, 2303 h2 strong, 2304 .h2 strong, 2305 h3 strong, 2306 .h3 strong, 2307 h4 strong, 2308 .h4 strong, 2309 h5 strong, 2310 .h5 strong, 2311 h6 strong, 2312 .h6 strong { 2313 font-weight: var(--heading--font-weight-strong); 2314 } 2315 2316 h1, 2317 .h1 { 2318 font-size: var(--heading--font-size-h1); 2319 letter-spacing: var(--heading--letter-spacing-h1); 2320 line-height: var(--heading--line-height-h1); 2321 } 2322 2323 h2, 2324 .h2 { 2325 font-size: var(--heading--font-size-h2); 2326 letter-spacing: var(--heading--letter-spacing-h2); 2327 line-height: var(--heading--line-height-h2); 2328 } 2329 2330 h3, 2331 .h3 { 2332 font-size: var(--heading--font-size-h3); 2333 letter-spacing: var(--heading--letter-spacing-h3); 2334 line-height: var(--heading--line-height-h3); 2335 } 2336 2337 h4, 2338 .h4 { 2339 font-size: var(--heading--font-size-h4); 2340 font-weight: var(--heading--font-weight-strong); 2341 letter-spacing: var(--heading--letter-spacing-h4); 2342 line-height: var(--heading--line-height-h4); 2343 } 2344 2345 h5, 2346 .h5 { 2347 font-size: var(--heading--font-size-h5); 2348 font-weight: var(--heading--font-weight-strong); 2349 letter-spacing: var(--heading--letter-spacing-h5); 2350 line-height: var(--heading--line-height-h5); 2351 } 2352 2353 h6, 2354 .h6 { 2355 font-size: var(--heading--font-size-h6); 2356 font-weight: var(--heading--font-weight-strong); 2357 letter-spacing: var(--heading--letter-spacing-h6); 2358 line-height: var(--heading--line-height-h6); 2359 } 2360 2361 .wp-block-image { 2362 text-align: center; 2363 } 2364 2365 .wp-block-image figcaption { 2366 color: var(--global--color-primary); 2367 font-size: var(--global--font-size-xs); 2368 line-height: var(--global--line-height-body); 2369 margin-top: calc(0.5 * var(--global--spacing-unit)); 2370 margin-bottom: var(--global--spacing-unit); 2371 text-align: center; 2372 } 2373 2374 .wp-block-image .alignright { 2375 margin-left: var(--global--spacing-horizontal); 2376 } 2377 2378 .wp-block-image .alignleft { 2379 margin-right: var(--global--spacing-horizontal); 2380 } 2381 2382 .wp-block-image a:focus img { 2383 outline-offset: 2px; 2384 } 2385 2386 .entry-content > *[class=wp-block-image], 2387 .entry-content [class*=inner-container] > *[class=wp-block-image] { 2388 margin-top: 0; 2389 margin-bottom: 0; 2390 } 2391 2392 .entry-content > *[class=wp-block-image] + *, 2393 .entry-content [class*=inner-container] > *[class=wp-block-image] + * { 2394 margin-top: 0; 2395 } 2396 2397 .wp-block-image.is-style-twentytwentyone-border img, 2398 .wp-block-image.is-style-twentytwentyone-image-frame img { 2399 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2400 } 2401 2402 .wp-block-image.is-style-twentytwentyone-image-frame img { 2403 padding: var(--global--spacing-unit); 2404 } 2405 2406 @media only screen and (min-width: 482px) { 2407 2408 .entry-content > .wp-block-image > .alignleft, 2409 .entry-content > .wp-block-image > .alignright { 2410 max-width: 50%; 2411 } 2412 } 2413 @media only screen and (max-width: 481px) { 2414 2415 .entry-content > .wp-block-image > .alignleft, 2416 .entry-content > .wp-block-image > .alignright { 2417 margin-left: 0; 2418 margin-right: 0; 2419 } 2420 } 2421 2422 .wp-block-latest-comments { 2423 padding-left: 0; 2424 } 2425 2426 .wp-block-latest-comments .wp-block-latest-comments__comment { 2427 font-size: var(--global--font-size-sm); 2428 line-height: var(--global--line-height-body); 2429 2430 /* Vertical margins logic */ 2431 margin-top: var(--global--spacing-vertical); 2432 margin-bottom: var(--global--spacing-vertical); 2433 } 2434 2435 .wp-block-latest-comments .wp-block-latest-comments__comment:first-child { 2436 margin-top: 0; 2437 } 2438 2439 .wp-block-latest-comments .wp-block-latest-comments__comment:last-child { 2440 margin-bottom: 0; 2441 } 2442 2443 .wp-block-latest-comments .wp-block-latest-comments__comment-meta { 2444 font-family: var(--heading--font-family); 2445 } 2446 2447 .wp-block-latest-comments .wp-block-latest-comments__comment-date { 2448 color: var(--global--color-primary); 2449 font-size: var(--global--font-size-sm); 2450 } 2451 2452 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { 2453 font-size: var(--global--font-size-sm); 2454 line-height: var(--global--line-height-body); 2455 margin: 0; 2456 } 2457 2458 .wp-block-latest-posts { 2459 padding-left: 0; 2460 } 2461 2462 .wp-block-latest-posts:not(.is-grid) > li { 2463 margin-top: calc(1.666 * var(--global--spacing-vertical)); 2464 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 2465 } 2466 2467 .wp-block-latest-posts:not(.is-grid) > li:first-child { 2468 margin-top: 0; 2469 } 2470 2471 .wp-block-latest-posts:not(.is-grid) > li:last-child { 2472 margin-bottom: 0; 2473 } 2474 2475 .widget-area .wp-block-latest-posts:not(.is-grid) > li { 2476 margin-top: 0; 2477 margin-bottom: 0; 2478 } 2479 2480 .wp-block-latest-posts.is-grid { 2481 word-wrap: break-word; 2482 word-break: break-word; 2483 } 2484 2485 .wp-block-latest-posts.is-grid > li { 2486 margin-bottom: var(--global--spacing-vertical); 2487 } 2488 2489 .wp-block-latest-posts.is-grid > li:last-child { 2490 margin-bottom: 0; 2491 } 2492 2493 .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), 2494 .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, 2495 .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), 2496 .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, 2497 .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), 2498 .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, 2499 .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), 2500 .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, 2501 .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), 2502 .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { 2503 margin-bottom: 0; 2504 } 2505 2506 .wp-block-latest-posts > li > * { 2507 margin-top: calc(0.333 * var(--global--spacing-vertical)); 2508 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 2509 } 2510 2511 .wp-block-latest-posts > li > *:first-child { 2512 margin-top: 0; 2513 } 2514 2515 .wp-block-latest-posts > li > *:last-child { 2516 margin-bottom: 0; 2517 } 2518 2519 .wp-block-latest-posts > li > a { 2520 display: inline-block; 2521 font-family: var(--latest-posts--title-font-family); 2522 font-size: var(--latest-posts--title-font-size); 2523 font-weight: var(--heading--font-weight); 2524 line-height: var(--global--line-height-heading); 2525 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 2526 } 2527 2528 .widget-area .wp-block-latest-posts > li > a { 2529 font-size: var(--global--font-size-sm); 2530 margin-bottom: 0; 2531 } 2532 2533 .wp-block-latest-posts .wp-block-latest-posts__post-author { 2534 color: var(--global--color-primary); 2535 font-size: var(--global--font-size-md); 2536 line-height: var(--global--line-height-body); 2537 } 2538 2539 .wp-block-latest-posts .wp-block-latest-posts__post-date { 2540 color: var(--global--color-primary); 2541 font-size: var(--global--font-size-xs); 2542 line-height: var(--global--line-height-body); 2543 } 2544 2545 [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, 2546 .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { 2547 color: currentColor; 2548 } 2549 2550 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt, 2551 .wp-block-latest-posts .wp-block-latest-posts__post-full-content { 2552 font-family: var(--latest-posts--description-font-family); 2553 font-size: var(--latest-posts--description-font-size); 2554 line-height: var(--global--line-height-body); 2555 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2556 } 2557 2558 .wp-block-latest-posts.alignfull { 2559 padding-left: var(--global--spacing-unit); 2560 padding-right: var(--global--spacing-unit); 2561 } 2562 2563 .entry-content [class*=inner-container] .wp-block-latest-posts.alignfull, 2564 .entry-content .has-background .wp-block-latest-posts.alignfull { 2565 padding-left: 0; 2566 padding-right: 0; 2567 } 2568 2569 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { 2570 border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); 2571 border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); 2572 } 2573 2574 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, 2575 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { 2576 padding-bottom: var(--global--spacing-vertical); 2577 border-bottom: var(--separator--height) solid var(--global--color-border); 2578 margin-top: var(--global--spacing-vertical); 2579 margin-bottom: var(--global--spacing-vertical); 2580 } 2581 2582 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, 2583 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child { 2584 padding-bottom: 0; 2585 border-bottom: none; 2586 } 2587 2588 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { 2589 box-shadow: inset 0 -1px 0 0 var(--global--color-border); 2590 border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); 2591 } 2592 2593 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { 2594 margin: 0; 2595 padding-top: var(--global--spacing-vertical); 2596 padding-right: var(--global--spacing-horizontal); 2597 } 2598 2599 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { 2600 padding-bottom: var(--global--spacing-vertical); 2601 } 2602 @media screen and (min-width: 600px) { 2603 2604 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { 2605 width: calc((100% / 2)); 2606 } 2607 2608 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { 2609 width: calc((100% / 3)); 2610 } 2611 2612 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { 2613 width: calc((100% / 4)); 2614 } 2615 2616 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { 2617 width: calc((100% / 5)); 2618 } 2619 2620 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { 2621 width: calc((100% / 6)); 2622 } 2623 } 2624 2625 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { 2626 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2627 padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); 2628 } 2629 2630 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { 2631 padding-bottom: var(--global--spacing-vertical); 2632 } 2633 2634 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { 2635 margin-top: var(--global--spacing-horizontal); 2636 margin-bottom: var(--global--spacing-horizontal); 2637 } 2638 2639 .gallery-item { 2640 display: inline-block; 2641 text-align: center; 2642 vertical-align: top; 2643 width: 100%; 2644 } 2645 2646 .gallery-item a { 2647 display: block; 2648 } 2649 2650 .gallery-item a:focus img { 2651 outline-offset: -2px; 2652 } 2653 2654 .gallery-columns-2 .gallery-item { 2655 max-width: 50%; 2656 } 2657 2658 .gallery-columns-3 .gallery-item { 2659 max-width: 33.33%; 2660 } 2661 2662 .gallery-columns-4 .gallery-item { 2663 max-width: 25%; 2664 } 2665 2666 .gallery-columns-5 .gallery-item { 2667 max-width: 20%; 2668 } 2669 2670 .gallery-columns-6 .gallery-item { 2671 max-width: 16.66%; 2672 } 2673 2674 .gallery-columns-7 .gallery-item { 2675 max-width: 14.28%; 2676 } 2677 2678 .gallery-columns-8 .gallery-item { 2679 max-width: 12.5%; 2680 } 2681 2682 .gallery-columns-9 .gallery-item { 2683 max-width: 11.11%; 2684 } 2685 2686 .gallery-caption { 2687 display: block; 2688 } 2689 2690 figure.wp-caption a:focus img { 2691 outline-offset: 2px; 2692 } 2693 2694 ul, 2695 ol { 2696 font-family: var(--list--font-family); 2697 margin: 0; 2698 padding-left: calc(2 * var(--global--spacing-horizontal)); 2699 } 2700 2701 ul.aligncenter, 2702 ol.aligncenter { 2703 list-style-position: inside; 2704 padding: 0; 2705 } 2706 2707 ul.alignright, 2708 ol.alignright { 2709 list-style-position: inside; 2710 text-align: right; 2711 padding: 0; 2712 } 2713 2714 ul { 2715 list-style-type: disc; 2716 } 2717 2718 ul ul { 2719 list-style-type: circle; 2720 } 2721 2722 ol { 2723 list-style-type: decimal; 2724 } 2725 2726 ol ul { 2727 list-style-type: circle; 2728 } 2729 2730 dt { 2731 font-family: var(--definition-term--font-family); 2732 font-weight: bold; 2733 } 2734 2735 dd { 2736 margin: 0; 2737 padding-left: calc(2 * var(--global--spacing-horizontal)); 2738 } 2739 2740 .wp-block-media-text { 2741 2742 /** 2743 * Block Options 2744 */ 2745 } 2746 2747 .wp-block-media-text.alignfull { 2748 margin-top: 0; 2749 margin-bottom: 0; 2750 } 2751 2752 .wp-block-media-text a:focus img { 2753 outline-offset: -1px; 2754 } 2755 2756 .wp-block-media-text .wp-block-media-text__content { 2757 padding: var(--global--spacing-horizontal); 2758 } 2759 @media only screen and (min-width: 592px) { 2760 2761 .wp-block-media-text .wp-block-media-text__content { 2762 padding: var(--global--spacing-vertical); 2763 } 2764 } 2765 2766 .wp-block-media-text .wp-block-media-text__content > * { 2767 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2768 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2769 } 2770 @media only screen and (min-width: 482px) { 2771 2772 .wp-block-media-text .wp-block-media-text__content > * { 2773 margin-top: var(--global--spacing-vertical); 2774 margin-bottom: var(--global--spacing-vertical); 2775 } 2776 } 2777 2778 .wp-block-media-text .wp-block-media-text__content > *:first-child { 2779 margin-top: 0; 2780 } 2781 2782 .wp-block-media-text .wp-block-media-text__content > *:last-child { 2783 margin-bottom: 0; 2784 } 2785 @media only screen and (min-width: 482px) { 2786 2787 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { 2788 padding-top: var(--global--spacing-vertical); 2789 padding-bottom: var(--global--spacing-vertical); 2790 } 2791 } 2792 2793 .wp-block-media-text.is-style-twentytwentyone-border { 2794 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2795 } 2796 2797 .wp-block-navigation .wp-block-navigation-link { 2798 padding: 0; 2799 } 2800 2801 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { 2802 padding: var(--primary-nav--padding); 2803 } 2804 2805 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { 2806 font-family: var(--primary-nav--font-family); 2807 font-size: var(--primary-nav--font-size); 2808 font-weight: var(--primary-nav--font-weight); 2809 } 2810 2811 .wp-block-navigation .wp-block-navigation-link__submenu-icon { 2812 padding: 0; 2813 } 2814 2815 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation-link { 2816 display: inherit; 2817 } 2818 2819 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { 2820 border: none; 2821 left: 0; 2822 margin-left: var(--primary-nav--padding); 2823 min-width: max-content; 2824 opacity: 0; 2825 padding: 0; 2826 position: inherit; 2827 top: inherit; 2828 } 2829 2830 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content { 2831 display: inline-block; 2832 padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); 2833 } 2834 2835 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { 2836 display: none; 2837 } 2838 2839 .wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, 2840 .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container { 2841 display: block; 2842 opacity: 1; 2843 visibility: visible; 2844 } 2845 2846 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { 2847 background: var(--global--color-background); 2848 margin: 0; 2849 padding: 0; 2850 position: absolute; 2851 top: 100%; 2852 border: 1px solid var(--primary-nav--border-color); 2853 } 2854 2855 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, 2856 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { 2857 content: ""; 2858 display: block; 2859 position: absolute; 2860 width: 0; 2861 top: -10px; 2862 left: var(--global--spacing-horizontal); 2863 border-style: solid; 2864 border-color: var(--primary-nav--border-color) transparent; 2865 border-width: 0 7px 10px 7px; 2866 } 2867 2868 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { 2869 top: -9px; 2870 border-color: var(--global--color-background) transparent; 2871 } 2872 2873 .wp-block-navigation:not(.has-background) .wp-block-navigation__container { 2874 background: var(--global--color-background); 2875 } 2876 2877 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container { 2878 background: var(--global--color-background); 2879 } 2880 2881 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, 2882 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { 2883 color: var(--primary-nav--color-link-hover); 2884 } 2885 2886 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { 2887 text-decoration: underline; 2888 text-decoration-style: dotted; 2889 } 2890 2891 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content { 2892 color: currentColor; 2893 } 2894 2895 p { 2896 line-height: var(--wp--typography--line-height, var(--global--line-height-body)); 2897 } 2898 2899 p.has-background { 2900 padding: var(--global--spacing-unit); 2901 } 2902 2903 p.has-text-color a { 2904 color: var(--wp--style--color--link, var(--global--color-primary)); 2905 } 2906 2907 pre.wp-block-preformatted { 2908 overflow-x: auto; 2909 white-space: pre; 2910 } 2911 2912 .wp-block-pullquote { 2913 padding: calc(2 * var(--global--spacing-unit)) 0; 2914 text-align: center; 2915 border-width: var(--pullquote--border-width); 2916 border-bottom-style: solid; 2917 border-top-style: solid; 2918 color: currentColor; 2919 border-color: currentColor; 2920 position: relative; 2921 2922 /** 2923 * Block Options 2924 */ 2925 } 2926 2927 .wp-block-pullquote blockquote::before { 2928 color: currentColor; 2929 content: "“"; 2930 display: block; 2931 position: relative; 2932 left: 0; 2933 font-size: 3rem; 2934 font-weight: 500; 2935 line-height: 1; 2936 } 2937 2938 .wp-block-pullquote p { 2939 font-family: var(--pullquote--font-family); 2940 font-size: var(--pullquote--font-size); 2941 font-style: var(--pullquote--font-style); 2942 font-weight: 700; 2943 letter-spacing: var(--pullquote--letter-spacing); 2944 line-height: var(--pullquote--line-height); 2945 margin: 0; 2946 } 2947 2948 .wp-block-pullquote a { 2949 color: currentColor; 2950 } 2951 2952 .wp-block-pullquote .wp-block-pullquote__citation, 2953 .wp-block-pullquote cite, 2954 .wp-block-pullquote footer { 2955 color: currentColor; 2956 display: block; 2957 font-size: var(--global--font-size-xs); 2958 font-style: var(--pullquote--font-style); 2959 text-transform: none; 2960 } 2961 2962 .wp-block-pullquote:not(.is-style-solid-color) { 2963 background: none; 2964 } 2965 2966 .wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, 2967 .wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { 2968 text-align: center; 2969 } 2970 2971 .wp-block-pullquote.alignwide > p, 2972 .wp-block-pullquote.alignwide blockquote { 2973 max-width: var(--responsive--alignwide-width); 2974 } 2975 2976 .wp-block-pullquote.alignfull:not(.is-style-solid-color) > p, 2977 .wp-block-pullquote.alignfull:not(.is-style-solid-color) blockquote { 2978 padding: 0 calc(2 * var(--global--spacing-unit)); 2979 } 2980 2981 .wp-block-pullquote.is-style-solid-color { 2982 color: var(--pullquote--color-foreground); 2983 padding: calc(2.5 * var(--global--spacing-unit)); 2984 border-width: var(--pullquote--border-width); 2985 border-style: solid; 2986 border-color: var(--pullquote--border-color); 2987 } 2988 @media (min-width: 600px) { 2989 2990 .wp-block-pullquote.is-style-solid-color { 2991 padding: calc(5 * var(--global--spacing-unit)); 2992 } 2993 } 2994 2995 .wp-block-pullquote.is-style-solid-color blockquote::before { 2996 text-align: left; 2997 } 2998 2999 .wp-block-pullquote.is-style-solid-color blockquote { 3000 margin: 0; 3001 max-width: inherit; 3002 } 3003 3004 .wp-block-pullquote.is-style-solid-color blockquote p { 3005 font-size: var(--pullquote--font-size); 3006 } 3007 3008 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, 3009 .wp-block-pullquote.is-style-solid-color cite, 3010 .wp-block-pullquote.is-style-solid-color footer { 3011 color: currentColor; 3012 } 3013 3014 .wp-block-pullquote.is-style-solid-color.alignleft, 3015 .wp-block-pullquote.is-style-solid-color.alignright { 3016 padding: var(--global--spacing-unit); 3017 } 3018 3019 .wp-block-pullquote.is-style-solid-color.alignleft blockquote, 3020 .wp-block-pullquote.is-style-solid-color.alignright blockquote { 3021 max-width: initial; 3022 } 3023 3024 .wp-block-query.has-background { 3025 padding: calc(0.666 * var(--global--spacing-vertical)); 3026 } 3027 @media only screen and (min-width: 482px) { 3028 3029 .wp-block-query.has-background { 3030 padding: var(--global--spacing-vertical); 3031 } 3032 } 3033 3034 .wp-block-quote { 3035 border-left: none; 3036 3037 /** 3038 * Block Options 3039 */ 3040 } 3041 3042 .wp-block-quote:before { 3043 content: "“"; 3044 font-size: var(--quote--font-size); 3045 line-height: var(--quote--line-height); 3046 left: 8px; 3047 } 3048 3049 .has-background .wp-block-quote .wp-block-quote__citation, 3050 [class*=background-color] .wp-block-quote .wp-block-quote__citation, 3051 [style*=background-color] .wp-block-quote .wp-block-quote__citation, 3052 .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, 3053 .has-background .wp-block-quote cite, 3054 [class*=background-color] .wp-block-quote cite, 3055 [style*=background-color] .wp-block-quote cite, 3056 .wp-block-cover[style*=background-image] .wp-block-quote cite, 3057 .has-background .wp-block-quote footer, 3058 [class*=background-color] .wp-block-quote footer, 3059 [style*=background-color] .wp-block-quote footer, 3060 .wp-block-cover[style*=background-image] .wp-block-quote footer { 3061 color: currentColor; 3062 } 3063 3064 .wp-block-quote.has-text-align-right { 3065 margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; 3066 padding-right: 0; 3067 border-right: none; 3068 } 3069 3070 .wp-block-quote.has-text-align-right:before { 3071 display: none; 3072 } 3073 3074 .wp-block-quote.has-text-align-right p:before { 3075 content: "”"; 3076 font-size: var(--quote--font-size); 3077 font-weight: normal; 3078 line-height: var(--quote--line-height); 3079 margin-right: 5px; 3080 } 3081 3082 .wp-block-quote.has-text-align-center { 3083 margin: var(--global--spacing-vertical) auto; 3084 } 3085 3086 .wp-block-quote.has-text-align-center:before { 3087 display: none; 3088 } 3089 3090 .wp-block-quote.is-large, 3091 .wp-block-quote.is-style-large { 3092 padding-left: 0; 3093 padding-right: 0; 3094 3095 /* Resetting margins to match _block-container.scss */ 3096 margin-top: var(--global--spacing-vertical); 3097 margin-bottom: var(--global--spacing-vertical); 3098 } 3099 3100 .wp-block-quote.is-large p, 3101 .wp-block-quote.is-style-large p { 3102 font-size: var(--quote--font-size-large); 3103 font-style: var(--quote--font-style-large); 3104 line-height: var(--quote--line-height-large); 3105 } 3106 3107 .wp-block-quote.is-large:before, 3108 .wp-block-quote.is-style-large:before { 3109 font-size: var(--quote--font-size-large); 3110 line-height: var(--quote--line-height-large); 3111 left: calc(-1 * var(--global--spacing-horizontal)); 3112 } 3113 3114 .wp-block-quote.is-large.has-text-align-right:before, 3115 .wp-block-quote.is-style-large.has-text-align-right:before { 3116 display: none; 3117 } 3118 3119 .wp-block-quote.is-large.has-text-align-right p:before, 3120 .wp-block-quote.is-style-large.has-text-align-right p:before { 3121 content: "”"; 3122 font-size: var(--quote--font-size-large); 3123 font-weight: normal; 3124 line-height: var(--quote--line-height-large); 3125 margin-right: 10px; 3126 } 3127 3128 .wp-block-quote.is-large .wp-block-quote__citation, 3129 .wp-block-quote.is-large cite, 3130 .wp-block-quote.is-large footer, 3131 .wp-block-quote.is-style-large .wp-block-quote__citation, 3132 .wp-block-quote.is-style-large cite, 3133 .wp-block-quote.is-style-large footer { 3134 color: var(--global--color-primary); 3135 font-size: var(--global--font-size-sm); 3136 } 3137 @media only screen and (max-width: 481px) { 3138 3139 .wp-block-quote.is-large, 3140 .wp-block-quote.is-style-large { 3141 padding-left: var(--global--spacing-horizontal); 3142 } 3143 3144 .wp-block-quote.is-large:before, 3145 .wp-block-quote.is-style-large:before { 3146 left: 0; 3147 } 3148 3149 .wp-block-quote.is-large.has-text-align-right, 3150 .wp-block-quote.is-style-large.has-text-align-right { 3151 padding-left: 0; 3152 padding-right: var(--global--spacing-horizontal); 3153 } 3154 3155 .wp-block-quote.is-large.has-text-align-right:before, 3156 .wp-block-quote.is-style-large.has-text-align-right:before { 3157 right: 0; 3158 } 3159 3160 .wp-block-quote.is-large.has-text-align-center, 3161 .wp-block-quote.is-style-large.has-text-align-center { 3162 padding-left: 0; 3163 padding-right: 0; 3164 } 3165 } 3166 @media only screen and (max-width: 481px) { 3167 3168 .wp-block-quote.has-text-align-right { 3169 padding-left: 0; 3170 padding-right: calc(0.5 * var(--global--spacing-horizontal)); 3171 } 3172 3173 .wp-block-quote.has-text-align-right:before { 3174 right: 0; 3175 } 3176 3177 .wp-block-quote.has-text-align-center { 3178 padding-left: 0; 3179 padding-right: 0; 3180 } 3181 } 3182 3183 .wp-block-rss { 3184 padding-left: 0; 3185 } 3186 3187 .wp-block-rss > li { 3188 list-style: none; 3189 } 3190 3191 .wp-block-rss:not(.is-grid) > li { 3192 margin-top: calc(1.666 * var(--global--spacing-vertical)); 3193 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 3194 } 3195 3196 .wp-block-rss:not(.is-grid) > li:first-child { 3197 margin-top: 0; 3198 } 3199 3200 .wp-block-rss:not(.is-grid) > li:last-child { 3201 margin-bottom: 0; 3202 } 3203 3204 .wp-block-rss.is-grid > li { 3205 margin-bottom: var(--global--spacing-vertical); 3206 } 3207 3208 .wp-block-rss.is-grid > li:last-child { 3209 margin-bottom: 0; 3210 } 3211 3212 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), 3213 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, 3214 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), 3215 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, 3216 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), 3217 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, 3218 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), 3219 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, 3220 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), 3221 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { 3222 margin-bottom: 0; 3223 } 3224 3225 .wp-block-rss > li > * { 3226 margin-top: calc(0.333 * var(--global--spacing-vertical)); 3227 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 3228 } 3229 3230 .wp-block-rss > li > *:first-child { 3231 margin-top: 0; 3232 } 3233 3234 .wp-block-rss > li > *:last-child { 3235 margin-bottom: 0; 3236 } 3237 3238 .wp-block-rss .wp-block-rss__item-title > a { 3239 display: inline-block; 3240 font-family: var(--latest-posts--title-font-family); 3241 font-size: var(--latest-posts--title-font-size); 3242 font-weight: var(--heading--font-weight); 3243 line-height: var(--global--line-height-heading); 3244 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 3245 } 3246 3247 .wp-block-rss .wp-block-rss__item-author { 3248 color: var(--global--color-primary); 3249 font-size: var(--global--font-size-md); 3250 line-height: var(--global--line-height-body); 3251 } 3252 3253 .wp-block-rss .wp-block-rss__item-publish-date { 3254 color: var(--global--color-primary); 3255 font-size: var(--global--font-size-xs); 3256 line-height: var(--global--line-height-body); 3257 } 3258 3259 [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, 3260 .has-background .wp-block-rss .wp-block-rss__item-publish-date { 3261 color: currentColor; 3262 } 3263 3264 .wp-block-rss .wp-block-rss__item-excerpt, 3265 .wp-block-rss .wp-block-rss__item-full-content { 3266 font-family: var(--latest-posts--description-font-family); 3267 font-size: var(--latest-posts--description-font-size); 3268 line-height: var(--global--line-height-body); 3269 margin-top: calc(0.666 * var(--global--spacing-vertical)); 3270 } 3271 3272 .wp-block-rss.alignfull { 3273 padding-left: var(--global--spacing-unit); 3274 padding-right: var(--global--spacing-unit); 3275 } 3276 3277 .entry-content [class*=inner-container] .wp-block-rss.alignfull, 3278 .entry-content .has-background .wp-block-rss.alignfull { 3279 padding-left: 0; 3280 padding-right: 0; 3281 } 3282 3283 .wp-block-search { 3284 max-width: var(--responsive--aligndefault-width); 3285 } 3286 3287 .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { 3288 justify-content: center; 3289 } 3290 3291 .wp-block-search .wp-block-search__label { 3292 font-size: var(--form--font-size); 3293 font-weight: var(--form--label-weight); 3294 margin-bottom: calc(var(--global--spacing-vertical) / 3); 3295 } 3296 3297 .wp-block-search .wp-block-search__input { 3298 border: var(--form--border-width) solid var(--form--border-color); 3299 border-radius: var(--form--border-radius); 3300 color: var(--form--color-text); 3301 line-height: var(--form--line-height); 3302 max-width: inherit; 3303 margin-right: calc(-1 * var(--button--border-width)); 3304 padding: var(--form--spacing-unit); 3305 } 3306 3307 .wp-block-search .wp-block-search__input:focus { 3308 color: var(--form--color-text); 3309 border-color: var(--form--border-color); 3310 } 3311 3312 .has-background .wp-block-search .wp-block-search__input { 3313 border-color: var(--local--color-primary, var(--global--color-primary)) !important; 3314 } 3315 3316 .wp-block-search button.wp-block-search__button { 3317 margin-left: 0; 3318 line-height: 1; 3319 } 3320 3321 .wp-block-search button.wp-block-search__button.has-icon { 3322 padding: 6px calc(0.5 * var(--button--padding-horizontal)); 3323 } 3324 3325 .wp-block-search button.wp-block-search__button.has-icon svg { 3326 width: 40px; 3327 height: 40px; 3328 fill: currentColor; 3329 } 3330 3331 .has-background .wp-block-search button.wp-block-search__button:hover, 3332 .has-background .wp-block-search button.wp-block-search__button:active { 3333 background-color: var(--local--color-background, var(--global--color-background)) !important; 3334 color: var(--local--color-primary, var(--global--color-primary)) !important; 3335 } 3336 3337 .has-text-color .wp-block-search button.wp-block-search__button:hover, 3338 .has-text-color .wp-block-search button.wp-block-search__button:active { 3339 color: var(--local--color-primary, var(--global--color-primary)) !important; 3340 } 3341 3342 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { 3343 background-color: var(--global--color-white); 3344 border: var(--form--border-width) solid var(--form--border-color); 3345 border-radius: var(--form--border-radius); 3346 padding: var(--form--border-width); 3347 } 3348 3349 .has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { 3350 border-color: var(--local--color-primary, var(--global--color-primary)) !important; 3351 } 3352 3353 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { 3354 margin-left: 0; 3355 margin-right: 0; 3356 padding-left: var(--form--spacing-unit); 3357 } 3358 3359 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { 3360 color: var(--form--color-text); 3361 outline-offset: -2px; 3362 outline: 2px dotted var(--form--border-color); 3363 } 3364 3365 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button { 3366 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 3367 } 3368 3369 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { 3370 color: var(--global--color-dark-gray); 3371 } 3372 3373 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button { 3374 color: var(--global--color-dark-gray); 3375 } 3376 3377 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { 3378 background-color: var(--global--color-dark-gray); 3379 color: var(--global--color-white); 3380 } 3381 3382 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon { 3383 padding: 6px calc(0.5 * var(--button--padding-horizontal)); 3384 } 3385 3386 .wp-block-search__button { 3387 box-shadow: none; 3388 } 3389 3390 hr { 3391 border-style: none; 3392 border-bottom: var(--separator--height) solid var(--separator--border-color); 3393 clear: both; 3394 margin-left: auto; 3395 margin-right: auto; 3396 } 3397 3398 hr.wp-block-separator { 3399 border-bottom: var(--separator--height) solid var(--separator--border-color); 3400 opacity: 1; 3401 3402 /** 3403 * Block Options 3404 */ 3405 } 3406 3407 hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { 3408 max-width: var(--responsive--aligndefault-width); 3409 } 3410 3411 hr.wp-block-separator:not(.is-style-dots).alignwide { 3412 max-width: var(--responsive--alignwide-width); 3413 } 3414 3415 hr.wp-block-separator:not(.is-style-dots).alignfull { 3416 max-width: var(--responsive--alignfull-width); 3417 } 3418 3419 hr.wp-block-separator.is-style-twentytwentyone-separator-thick { 3420 border-bottom-width: calc(3 * var(--separator--height)); 3421 } 3422 3423 hr.wp-block-separator.is-style-dots.has-background, 3424 hr.wp-block-separator.is-style-dots.has-text-color { 3425 background-color: transparent !important; 3426 } 3427 3428 hr.wp-block-separator.is-style-dots.has-background:before, 3429 hr.wp-block-separator.is-style-dots.has-text-color:before { 3430 color: currentColor !important; 3431 } 3432 3433 hr.wp-block-separator.is-style-dots:before { 3434 color: var(--separator--border-color); 3435 font-size: var(--global--font-size-xl); 3436 letter-spacing: var(--global--font-size-sm); 3437 padding-left: var(--global--font-size-sm); 3438 } 3439 3440 .has-background hr.wp-block-separator, 3441 [class*=background-color] hr.wp-block-separator, 3442 [style*=background-color] hr.wp-block-separator, 3443 .wp-block-cover[style*=background-image] hr.wp-block-separator { 3444 border-color: currentColor; 3445 } 3446 3447 .wp-block-social-links a:focus { 3448 color: var(--global--color-primary); 3449 } 3450 3451 .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { 3452 color: var(--global--color-primary); 3453 } 3454 3455 .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link, 3456 .wp-block-social-links.is-style-twentytwentyone-social-icons-color.has-icon-background-color.has-icon-background-color .wp-social-link { 3457 background: none; 3458 } 3459 3460 .wp-block-spacer { 3461 display: block; 3462 margin-bottom: 0 !important; 3463 margin-top: 0 !important; 3464 } 3465 @media only screen and (max-width: 481px) { 3466 3467 .wp-block-spacer[style] { 3468 height: var(--global--spacing-unit) !important; 3469 } 3470 } 3471 3472 table, 3473 .wp-block-table { 3474 width: 100%; 3475 min-width: 240px; 3476 border-collapse: collapse; 3477 } 3478 3479 table thead, 3480 table tfoot, 3481 .wp-block-table thead, 3482 .wp-block-table tfoot { 3483 text-align: center; 3484 } 3485 3486 table th, 3487 .wp-block-table th { 3488 font-family: var(--heading--font-family); 3489 } 3490 3491 table td, 3492 table th, 3493 .wp-block-table td, 3494 .wp-block-table th { 3495 padding: calc(0.5 * var(--global--spacing-unit)); 3496 border: 1px solid; 3497 } 3498 3499 table figcaption, 3500 .wp-block-table figcaption { 3501 color: var(--global--color-primary); 3502 font-size: var(--global--font-size-xs); 3503 } 3504 3505 table.is-style-regular .has-background, 3506 table.is-style-stripes .has-background, 3507 table.is-style-stripes .has-background thead tr, 3508 table.is-style-stripes .has-background tfoot tr, 3509 table.is-style-stripes .has-background tbody tr, 3510 .wp-block-table.is-style-regular .has-background, 3511 .wp-block-table.is-style-stripes .has-background, 3512 .wp-block-table.is-style-stripes .has-background thead tr, 3513 .wp-block-table.is-style-stripes .has-background tfoot tr, 3514 .wp-block-table.is-style-stripes .has-background tbody tr { 3515 color: var(--table--has-background-text-color); 3516 } 3517 3518 table.is-style-stripes, 3519 .wp-block-table.is-style-stripes { 3520 border-color: var(--table--stripes-border-color); 3521 } 3522 3523 table.is-style-stripes th, 3524 table.is-style-stripes td, 3525 .wp-block-table.is-style-stripes th, 3526 .wp-block-table.is-style-stripes td { 3527 border-width: 0; 3528 } 3529 3530 table.is-style-stripes tbody tr:nth-child(odd), 3531 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { 3532 background-color: var(--table--stripes-background-color); 3533 } 3534 3535 table.is-style-stripes .has-background tbody tr:nth-child(odd), 3536 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { 3537 background-color: var(--global--color-white-90); 3538 } 3539 3540 table.wp-calendar-table td, 3541 table.wp-calendar-table th { 3542 background: transparent; 3543 border: 0; 3544 text-align: center; 3545 line-height: 2; 3546 vertical-align: middle; 3547 word-break: normal; 3548 } 3549 3550 table.wp-calendar-table th { 3551 font-weight: bold; 3552 } 3553 3554 table.wp-calendar-table thead, 3555 table.wp-calendar-table tbody { 3556 color: currentColor; 3557 border: 1px solid; 3558 } 3559 3560 table.wp-calendar-table caption { 3561 font-weight: bold; 3562 text-align: left; 3563 margin-bottom: var(--global--spacing-unit); 3564 color: currentColor; 3565 } 3566 3567 .wp-calendar-nav { 3568 text-align: left; 3569 margin-top: calc(var(--global--spacing-unit) / 2); 3570 } 3571 3572 .wp-calendar-nav svg { 3573 height: 1em; 3574 vertical-align: middle; 3575 } 3576 3577 .wp-calendar-nav svg path { 3578 fill: currentColor; 3579 } 3580 3581 .wp-calendar-nav .wp-calendar-nav-next { 3582 float: right; 3583 } 3584 3585 .wp-block-tag-cloud.alignfull { 3586 padding-left: var(--global--spacing-unit); 3587 padding-right: var(--global--spacing-unit); 3588 } 3589 3590 .wp-block-verse { 3591 font-family: var(--entry-content--font-family); 3592 } 3593 3594 .wp-block-video figcaption { 3595 color: var(--global--color-primary); 3596 font-size: var(--global--font-size-xs); 3597 margin-top: calc(0.5 * var(--global--spacing-unit)); 3598 margin-bottom: var(--global--spacing-unit); 3599 text-align: center; 3600 } 3601 3602 * > figure > video { 3603 max-width: unset; 3604 width: 100%; 3605 vertical-align: middle; 3606 } 3607 3608 :root .is-extra-small-text, 3609 :root .has-extra-small-font-size { 3610 font-size: var(--global--font-size-xs); 3611 } 3612 3613 :root .is-small-text, 3614 :root .has-small-font-size { 3615 font-size: var(--global--font-size-sm); 3616 } 3617 3618 :root .is-regular-text, 3619 :root .has-regular-font-size, 3620 :root .is-normal-font-size, 3621 :root .has-normal-font-size, 3622 :root .has-medium-font-size { 3623 font-size: var(--global--font-size-base); 3624 } 3625 3626 :root .is-large-text, 3627 :root .has-large-font-size { 3628 font-size: var(--global--font-size-lg); 3629 line-height: var(--global--line-height-heading); 3630 } 3631 3632 :root .is-larger-text, 3633 :root .has-larger-font-size, 3634 :root .is-extra-large-text, 3635 :root .has-extra-large-font-size { 3636 font-size: var(--global--font-size-xl); 3637 line-height: var(--global--line-height-heading); 3638 } 3639 3640 :root .is-huge-text, 3641 :root .has-huge-font-size { 3642 font-size: var(--global--font-size-xxl); 3643 line-height: var(--global--line-height-heading); 3644 font-weight: var(--heading--font-weight-page-title); 3645 } 3646 3647 :root .is-gigantic-text, 3648 :root .has-gigantic-font-size { 3649 font-size: var(--global--font-size-xxxl); 3650 line-height: var(--global--line-height-heading); 3651 font-weight: var(--heading--font-weight-page-title); 3652 } 3653 3654 /* Block Alignments */ 3655 3656 /** 3657 * These selectors set the default max width for content appearing inside a post or page. 3658 */ 3659 3660 /** 3661 * .alignleft 3662 */ 3663 .alignleft { 3664 3665 /*rtl:ignore*/ 3666 text-align: left; 3667 margin-top: 0; 3668 } 3669 3670 .entry-content > .alignleft { 3671 max-width: var(--responsive--aligndefault-width); 3672 } 3673 3674 @media only screen and (min-width: 482px) { 3675 3676 .alignleft { 3677 3678 /*rtl:ignore*/ 3679 float: left; 3680 3681 /*rtl:ignore*/ 3682 margin-right: var(--global--spacing-horizontal); 3683 margin-bottom: var(--global--spacing-vertical); 3684 } 3685 3686 .entry-content > .alignleft { 3687 max-width: calc(50% - var(--responsive--alignleft-margin)); 3688 } 3689 } 3690 3691 /** 3692 * .aligncenter 3693 */ 3694 .aligncenter { 3695 clear: both; 3696 display: block; 3697 float: none; 3698 margin-right: auto; 3699 margin-left: auto; 3700 text-align: center; 3701 } 3702 3703 /** 3704 * .alignright 3705 */ 3706 .alignright { 3707 margin-top: 0; 3708 margin-bottom: var(--global--spacing-vertical); 3709 } 3710 3711 .entry-content > .alignright { 3712 max-width: var(--responsive--aligndefault-width); 3713 } 3714 3715 @media only screen and (min-width: 482px) { 3716 3717 .alignright { 3718 3719 /*rtl:ignore*/ 3720 float: right; 3721 3722 /*rtl:ignore*/ 3723 margin-left: var(--global--spacing-horizontal); 3724 } 3725 3726 .entry-content > .alignright { 3727 max-width: calc(50% - var(--responsive--alignright-margin)); 3728 } 3729 } 3730 3731 [class*=inner-container] > .alignleft + *, 3732 [class*=inner-container] > .alignright + * { 3733 margin-top: 0; 3734 } 3735 3736 /** 3737 * .alignwide 3738 */ 3739 .alignwide { 3740 clear: both; 3741 } 3742 3743 /** 3744 * .alignfull 3745 */ 3746 .alignfull { 3747 clear: both; 3748 } 3749 3750 .has-left-content { 3751 justify-content: flex-start; 3752 } 3753 3754 .has-right-content { 3755 justify-content: flex-end; 3756 } 3757 3758 .has-parallax { 3759 background-attachment: fixed; 3760 } 3761 3762 .has-drop-cap:not(:focus)::first-letter { 3763 font-family: var(--heading--font-family); 3764 font-weight: var(--heading--font-weight); 3765 line-height: 0.66; 3766 text-transform: uppercase; 3767 font-style: normal; 3768 float: left; 3769 margin: 0.1em 0.1em 0 0; 3770 font-size: calc(1.2 * var(--heading--font-size-h1)); 3771 } 3772 3773 .has-drop-cap:not(:focus)::after { 3774 content: ""; 3775 display: table; 3776 clear: both; 3777 padding-top: 14px; 3778 } 3779 3780 .desktop-only { 3781 display: none; 3782 } 3783 @media only screen and (min-width: 482px) { 3784 3785 .desktop-only { 3786 display: block; 3787 } 3788 } 3789 3790 /* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */ 3791 .site-header { 3792 display: flex; 3793 align-items: flex-start; 3794 flex-wrap: wrap; 3795 row-gap: var(--global--spacing-vertical); 3796 } 3797 3798 .wp-custom-logo .site-header { 3799 align-items: center; 3800 } 3801 @media only screen and (min-width: 482px) { 3802 3803 .site-header { 3804 padding-top: calc(var(--global--spacing-vertical) / 0.75); 3805 } 3806 } 3807 @media only screen and (min-width: 822px) { 3808 3809 .site-header { 3810 padding-top: calc(2.4 * var(--global--spacing-vertical)); 3811 } 3812 } 3813 3814 .site-branding { 3815 color: var(--branding--color-text); 3816 margin-right: 140px; 3817 } 3818 3819 .site-branding:last-child { 3820 margin-right: 0; 3821 width: 100%; 3822 text-align: center; 3823 } 3824 @media only screen and (min-width: 482px) { 3825 3826 .site-branding { 3827 margin-right: initial; 3828 margin-top: 4px; 3829 } 3830 } 3831 3832 .site-title { 3833 color: var(--branding--color-link); 3834 font-family: var(--branding--title--font-family); 3835 font-size: var(--branding--title--font-size-mobile); 3836 letter-spacing: normal; 3837 text-transform: var(--branding--title--text-transform); 3838 line-height: var(--global--line-height-heading); 3839 margin-bottom: calc(var(--global--spacing-vertical) / 6); 3840 } 3841 3842 .site-title a { 3843 color: currentColor; 3844 font-weight: var(--branding--title--font-weight); 3845 } 3846 3847 .site-title a:link, 3848 .site-title a:visited, 3849 .site-title a:active { 3850 color: currentColor; 3851 } 3852 3853 .site-title a:hover, 3854 .site-title a:focus { 3855 color: var(--branding--color-link-hover); 3856 } 3857 @media only screen and (min-width: 482px) { 3858 3859 .site-title { 3860 font-size: var(--branding--title--font-size); 3861 } 3862 } 3863 3864 .site-description { 3865 color: currentColor; 3866 font-family: var(--branding--description--font-family); 3867 font-size: var(--branding--description--font-size); 3868 line-height: 1.4; 3869 } 3870 3871 .site-title > a { 3872 text-decoration-color: var(--global--color-secondary); 3873 } 3874 3875 .site-logo { 3876 margin: calc(var(--global--spacing-vertical) / 2) 0; 3877 } 3878 3879 .site-header > .site-logo { 3880 width: 100%; 3881 padding-bottom: calc(var(--global--spacing-vertical) * 1.5); 3882 border-bottom: 1px solid; 3883 text-align: center; 3884 } 3885 3886 .site-logo .custom-logo { 3887 margin-left: auto; 3888 margin-right: auto; 3889 max-width: var(--branding--logo--max-width-mobile); 3890 max-height: var(--branding--logo--max-height-mobile); 3891 height: auto; 3892 display: inline-block; 3893 width: auto; 3894 } 3895 @media only screen and (min-width: 482px) { 3896 3897 .site-logo .custom-logo { 3898 max-width: var(--branding--logo--max-width); 3899 max-height: var(--branding--logo--max-height); 3900 height: auto; 3901 width: auto; 3902 } 3903 } 3904 3905 @media only screen and (max-width: 481px) { 3906 3907 .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { 3908 position: absolute; 3909 padding-top: calc(0.5 * var(--global--spacing-vertical)); 3910 margin-top: 0; 3911 top: var(--global--admin-bar--height); 3912 } 3913 3914 .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { 3915 display: none; 3916 } 3917 3918 .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img { 3919 max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); 3920 } 3921 3922 .site-header.has-logo.has-title-and-tagline { 3923 align-items: flex-start; 3924 } 3925 3926 .site-header.has-logo.has-title-and-tagline.has-menu { 3927 justify-content: space-between; 3928 } 3929 3930 .site-header.has-logo.has-title-and-tagline.has-menu .site-branding { 3931 max-width: calc(100% - 160px); 3932 } 3933 3934 .site-header.has-logo.has-title-and-tagline .site-branding { 3935 margin-right: 0; 3936 } 3937 3938 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline:after { 3939 display: none; 3940 } 3941 3942 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation { 3943 position: relative; 3944 top: 0; 3945 } 3946 3947 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container { 3948 position: relative; 3949 padding-top: 0; 3950 margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); 3951 } 3952 3953 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu { 3954 padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); 3955 padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); 3956 margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6); 3957 } 3958 3959 .site-header:not(.has-logo).has-title-and-tagline .site-branding { 3960 margin-right: 0; 3961 max-width: calc(100% - 160px); 3962 } 3963 3964 .site-header:not(.has-menu) { 3965 justify-content: center; 3966 } 3967 } 3968 3969 .site-footer { 3970 padding-top: 0; 3971 padding-bottom: calc(1.7 * var(--global--spacing-vertical)); 3972 } 3973 3974 .no-widgets .site-footer { 3975 margin-top: calc(6 * var(--global--spacing-vertical)); 3976 } 3977 @media only screen and (max-width: 481px) { 3978 3979 .no-widgets .site-footer { 3980 margin-top: calc(3 * var(--global--spacing-vertical)); 3981 } 3982 } 3983 3984 .site-footer > .site-info { 3985 padding-top: var(--global--spacing-vertical); 3986 color: var(--footer--color-text); 3987 font-family: var(--footer--font-family); 3988 font-size: var(--footer--font-size); 3989 line-height: var(--global--line-height-body); 3990 border-top: 3px solid var(--global--color-border); 3991 } 3992 3993 .site-footer > .site-info .site-name { 3994 text-transform: var(--branding--title--text-transform); 3995 font-size: var(--branding--title--font-size); 3996 } 3997 3998 .site-footer > .site-info .powered-by { 3999 margin-top: calc(0.5 * var(--global--spacing-vertical)); 4000 } 4001 @media only screen and (min-width: 822px) { 4002 4003 .site-footer > .site-info { 4004 display: flex; 4005 align-items: center; 4006 } 4007 4008 .site-footer > .site-info .powered-by { 4009 margin-top: initial; 4010 margin-left: auto; 4011 } 4012 } 4013 4014 .site-footer > .site-info a { 4015 color: var(--footer--color-link); 4016 } 4017 4018 .site-footer > .site-info a:link, 4019 .site-footer > .site-info a:visited, 4020 .site-footer > .site-info a:active { 4021 color: var(--footer--color-link); 4022 } 4023 4024 .site-footer > .site-info a:hover { 4025 color: var(--footer--color-link-hover); 4026 } 4027 4028 .site-footer > .site-info a:focus { 4029 color: var(--footer--color-link-hover); 4030 } 4031 4032 .is-dark-theme .site-footer > .site-info a:focus { 4033 color: var(--wp--style--color--link, var(--global--color-background)); 4034 } 4035 4036 .has-background-white .site-footer > .site-info a:focus { 4037 color: var(--wp--style--color--link, var(--global--color-white)); 4038 } 4039 4040 .singular .entry-header { 4041 border-bottom: 3px solid var(--global--color-border); 4042 padding-bottom: calc(2 * var(--global--spacing-vertical)); 4043 margin-bottom: calc(3 * var(--global--spacing-vertical)); 4044 } 4045 4046 .home .entry-header { 4047 border-bottom: none; 4048 padding-bottom: 0; 4049 margin-bottom: 0; 4050 } 4051 4052 .singular .has-post-thumbnail .entry-header { 4053 border-bottom: none; 4054 padding-bottom: calc(1.3 * var(--global--spacing-vertical)); 4055 margin-bottom: 0; 4056 } 4057 4058 .no-results.not-found > *:first-child { 4059 margin-bottom: calc(3 * var(--global--spacing-vertical)); 4060 } 4061 4062 .page-links { 4063 clear: both; 4064 } 4065 4066 .page-links .post-page-numbers { 4067 display: inline-block; 4068 margin-left: calc(0.66 * var(--global--spacing-unit)); 4069 margin-right: calc(0.66 * var(--global--spacing-unit)); 4070 min-width: 44px; 4071 min-height: 44px; 4072 } 4073 4074 .page-links .post-page-numbers:first-child { 4075 margin-left: 0; 4076 } 4077 4078 .entry-title { 4079 color: var(--entry-header--color); 4080 font-size: var(--entry-header--font-size); 4081 letter-spacing: var(--heading--letter-spacing-h2); 4082 line-height: var(--heading--line-height-h2); 4083 overflow-wrap: break-word; 4084 } 4085 4086 .entry-title a { 4087 color: var(--entry-header--color-link); 4088 text-underline-offset: 0.15em; 4089 } 4090 4091 .entry-title a:hover { 4092 color: var(--entry-header--color-hover); 4093 } 4094 4095 .entry-title a:focus { 4096 color: var(--entry-header--color-focus); 4097 } 4098 4099 .entry-title a:active { 4100 color: var(--entry-header--color-link); 4101 } 4102 4103 .singular .entry-title { 4104 font-size: var(--global--font-size-page-title); 4105 } 4106 4107 h1.entry-title { 4108 line-height: var(--heading--line-height-h1); 4109 font-weight: var(--heading--font-weight-page-title); 4110 } 4111 4112 /** 4113 * Entry Content 4114 */ 4115 .entry-content, 4116 .entry-summary { 4117 font-family: var(--entry-content--font-family); 4118 } 4119 4120 .entry-content p { 4121 word-wrap: break-word; 4122 } 4123 4124 .entry-content > iframe[style] { 4125 margin: var(--global--spacing-vertical) 0 !important; 4126 max-width: 100% !important; 4127 } 4128 4129 .entry-footer { 4130 color: var(--global--color-primary); 4131 clear: both; 4132 float: none; 4133 font-size: var(--global--font-size-xs); 4134 display: block; 4135 } 4136 4137 .entry-footer > span { 4138 display: inline-block; 4139 } 4140 4141 .entry-footer a { 4142 color: currentColor; 4143 } 4144 4145 .entry-footer a:hover, 4146 .entry-footer a:focus { 4147 color: var(--global--color-primary-hover); 4148 } 4149 4150 .entry-footer a:active { 4151 color: currentColor; 4152 } 4153 4154 .site-main > article > .entry-footer { 4155 margin-top: var(--global--spacing-vertical); 4156 padding-top: var(--global--spacing-unit); 4157 padding-bottom: calc(3 * var(--global--spacing-vertical)); 4158 border-bottom: var(--separator--height) solid var(--separator--border-color); 4159 } 4160 4161 body:not(.single) .site-main > article:last-of-type .entry-footer { 4162 border-bottom: var(--separator--height) solid transparent; 4163 } 4164 4165 .single .site-main > article > .entry-footer { 4166 margin-top: calc(3.4 * var(--global--spacing-vertical)); 4167 margin-bottom: calc(3.4 * var(--global--spacing-vertical)); 4168 padding-bottom: 0; 4169 padding-top: calc(0.8 * var(--global--spacing-vertical)); 4170 border-top: 3px solid var(--separator--border-color); 4171 border-bottom: var(--separator--height) solid transparent; 4172 display: grid; 4173 grid-template-columns: repeat(2, 1fr); 4174 column-gap: calc(2 * var(--global--spacing-horizontal)); 4175 } 4176 4177 .single .site-main > article > .entry-footer .post-taxonomies, 4178 .single .site-main > article > .entry-footer .full-size-link { 4179 justify-content: flex-end; 4180 text-align: right; 4181 } 4182 4183 .single .site-main > article > .entry-footer .full-size-link:first-child:last-child { 4184 grid-column: span 2; 4185 } 4186 4187 .single .site-main > article > .entry-footer .posted-on, 4188 .single .site-main > article > .entry-footer .byline, 4189 .single .site-main > article > .entry-footer .cat-links, 4190 .single .site-main > article > .entry-footer .tags-links { 4191 display: block; 4192 } 4193 @media only screen and (max-width: 481px) { 4194 4195 .single .site-main > article > .entry-footer { 4196 display: block; 4197 } 4198 4199 .single .site-main > article > .entry-footer .full-size-link { 4200 display: block; 4201 } 4202 4203 .single .site-main > article > .entry-footer .post-taxonomies, 4204 .single .site-main > article > .entry-footer .full-size-link { 4205 text-align: left; 4206 } 4207 } 4208 4209 /** 4210 * Post Thumbnails 4211 */ 4212 .post-thumbnail { 4213 text-align: center; 4214 } 4215 4216 .post-thumbnail .wp-post-image { 4217 display: block; 4218 width: auto; 4219 max-width: 100%; 4220 margin-left: auto; 4221 margin-right: auto; 4222 margin-top: calc(2 * var(--global--spacing-vertical)); 4223 } 4224 4225 /** 4226 * Author 4227 */ 4228 .author-bio { 4229 position: relative; 4230 font-size: var(--global--font-size-xs); 4231 max-width: var(--responsive--aligndefault-width); 4232 } 4233 4234 .site-main > article > .author-bio { 4235 margin-top: calc(2 * var(--global--spacing-vertical)); 4236 } 4237 4238 .author-bio.show-avatars .avatar { 4239 display: inline-block; 4240 vertical-align: top; 4241 border-radius: 50%; 4242 } 4243 4244 .author-bio.show-avatars .author-bio-content { 4245 display: inline-block; 4246 padding-left: var(--global--spacing-horizontal); 4247 max-width: calc(var(--responsive--aligndefault-width) - 90px); 4248 } 4249 4250 .author-bio .author-bio-content .author-title { 4251 font-family: var(--entry-author-bio--font-family); 4252 font-size: var(--entry-author-bio--font-size); 4253 display: inline; 4254 } 4255 4256 .author-bio .author-bio-content .author-description { 4257 font-size: var(--global--font-size-xs); 4258 margin-top: calc(0.5 * var(--global--spacing-vertical)); 4259 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 4260 } 4261 4262 .page-title { 4263 font-size: var(--global--font-size-page-title); 4264 } 4265 4266 h1.page-title, 4267 h2.page-title { 4268 font-weight: var(--heading--font-weight-page-title); 4269 } 4270 4271 h1.page-title { 4272 line-height: var(--heading--line-height-h1); 4273 } 4274 4275 .page-header { 4276 border-bottom: 3px solid var(--global--color-border); 4277 padding-bottom: calc(2 * var(--global--spacing-vertical)); 4278 } 4279 4280 .archive .content-area .format-aside .entry-content, 4281 .archive .content-area .format-status .entry-content, 4282 .archive .content-area .format-link .entry-content, 4283 .search .content-area .format-aside .entry-content, 4284 .search .content-area .format-status .entry-content, 4285 .search .content-area .format-link .entry-content, 4286 .blog .content-area .format-aside .entry-content, 4287 .blog .content-area .format-status .entry-content, 4288 .blog .content-area .format-link .entry-content { 4289 font-size: var(--global--font-size-lg); 4290 } 4291 4292 .archive .format-image .entry-content, 4293 .archive .format-gallery .entry-content, 4294 .archive .format-video .entry-content, 4295 .search .format-image .entry-content, 4296 .search .format-gallery .entry-content, 4297 .search .format-video .entry-content, 4298 .blog .format-image .entry-content, 4299 .blog .format-gallery .entry-content, 4300 .blog .format-video .entry-content { 4301 margin-top: calc(2 * var(--global--spacing-vertical)); 4302 } 4303 4304 .archive .entry-footer .cat-links, 4305 .archive .entry-footer .tags-links, 4306 .search .entry-footer .cat-links, 4307 .search .entry-footer .tags-links, 4308 .blog .entry-footer .cat-links, 4309 .blog .entry-footer .tags-links { 4310 display: block; 4311 } 4312 4313 .archive.logged-in .entry-footer .posted-on, 4314 .search.logged-in .entry-footer .posted-on, 4315 .blog.logged-in .entry-footer .posted-on { 4316 margin-right: calc(0.5 * var(--global--spacing-unit)); 4317 } 4318 4319 .archive-description { 4320 margin-top: var(--global--spacing-vertical); 4321 font-size: var(--global--font-size-xl); 4322 line-height: var(--global--line-height-heading); 4323 } 4324 4325 .error404 main p { 4326 font-size: var(--global--font-size-lg); 4327 margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); 4328 } 4329 4330 .search-no-results .page-content { 4331 margin-top: calc(3 * var(--global--spacing-vertical)); 4332 } 4333 4334 /** 4335 * Comments Wrapper 4336 */ 4337 .comments-area > * { 4338 margin-top: var(--global--spacing-vertical); 4339 margin-bottom: var(--global--spacing-vertical); 4340 } 4341 4342 .comments-area > *:first-child { 4343 margin-top: 0; 4344 } 4345 4346 .comments-area > *:last-child { 4347 margin-bottom: 0; 4348 } 4349 4350 .comments-area.show-avatars .avatar { 4351 border-radius: 50%; 4352 position: absolute; 4353 top: 10px; 4354 } 4355 4356 .comments-area.show-avatars .fn { 4357 display: inline-block; 4358 padding-left: 85px; 4359 } 4360 4361 .comments-area.show-avatars .comment-metadata { 4362 padding: 8px 0 9px 85px; 4363 } 4364 4365 /** 4366 * Comment Title 4367 */ 4368 .comments-title, 4369 .comment-reply-title { 4370 font-size: var(--heading--font-size-h2); 4371 letter-spacing: var(--heading--letter-spacing-h2); 4372 } 4373 4374 .comment-reply-title { 4375 display: flex; 4376 justify-content: space-between; 4377 } 4378 4379 .comment-reply-title small a { 4380 font-family: var(--global--font-secondary); 4381 font-size: var(--global--font-size-xs); 4382 font-style: normal; 4383 font-weight: normal; 4384 letter-spacing: normal; 4385 } 4386 4387 /* Nested comment reply title*/ 4388 .comment .comment-respond .comment-reply-title { 4389 font-size: var(--global--font-size-lg); 4390 } 4391 4392 /** 4393 * Comment Lists 4394 */ 4395 .comment-list { 4396 padding-left: 0; 4397 list-style: none; 4398 } 4399 4400 .comment-list > li { 4401 margin-top: var(--global--spacing-vertical); 4402 margin-bottom: var(--global--spacing-vertical); 4403 } 4404 4405 .comment-list .children { 4406 list-style: none; 4407 padding-left: 0; 4408 } 4409 4410 .comment-list .children > li { 4411 margin-top: var(--global--spacing-vertical); 4412 margin-bottom: var(--global--spacing-vertical); 4413 } 4414 4415 @media only screen and (min-width: 482px) { 4416 4417 .comment-list .depth-2, 4418 .comment-list .depth-3 { 4419 padding-left: calc(4 * var(--global--spacing-horizontal)); 4420 } 4421 } 4422 4423 /** 4424 * Comment Meta 4425 */ 4426 .comment-meta .comment-author { 4427 line-height: var(--global--line-height-heading); 4428 margin-bottom: calc(0.25 * var(--global--spacing-unit)); 4429 } 4430 @media only screen and (min-width: 482px) { 4431 4432 .comment-meta .comment-author { 4433 margin-bottom: 0; 4434 padding-right: 0; 4435 } 4436 } 4437 4438 .comment-meta .comment-author .fn { 4439 font-family: var(--global--font-secondary); 4440 font-weight: normal; 4441 font-size: var(--global--font-size-lg); 4442 hyphens: auto; 4443 word-wrap: break-word; 4444 word-break: break-word; 4445 } 4446 4447 .comment-meta .comment-metadata { 4448 color: var(--global--color-primary); 4449 font-size: var(--global--font-size-xs); 4450 padding: 8px 0 9px 0; 4451 } 4452 4453 .comment-meta .comment-metadata .edit-link { 4454 margin-left: var(--global--spacing-horizontal); 4455 } 4456 @media only screen and (min-width: 482px) { 4457 4458 .comment-meta { 4459 margin-right: inherit; 4460 } 4461 4462 .comment-meta .comment-author { 4463 max-width: inherit; 4464 } 4465 } 4466 4467 .reply { 4468 font-size: var(--global--font-size-sm); 4469 line-height: var(--global--line-height-heading); 4470 } 4471 4472 .bypostauthor { 4473 display: block; 4474 } 4475 4476 .says { 4477 display: none; 4478 } 4479 4480 .pingback .url, 4481 .trackback .url { 4482 font-family: var(--global--font-primary); 4483 } 4484 4485 .comment-body { 4486 position: relative; 4487 margin-bottom: calc(1.7 * var(--global--spacing-vertical)); 4488 } 4489 4490 .comment-body > * { 4491 margin-top: var(--global--spacing-vertical); 4492 margin-bottom: var(--global--spacing-vertical); 4493 } 4494 4495 .comment-body .reply { 4496 margin: 0; 4497 } 4498 4499 .comment-content { 4500 word-wrap: break-word; 4501 } 4502 4503 .pingback .comment-body, 4504 .trackback .comment-body { 4505 margin-top: var(--global--spacing-vertical); 4506 margin-bottom: var(--global--spacing-vertical); 4507 } 4508 4509 .comment-respond { 4510 margin-top: var(--global--spacing-vertical); 4511 } 4512 4513 .comment-respond > * { 4514 margin-top: var(--global--spacing-unit); 4515 margin-bottom: var(--global--spacing-unit); 4516 } 4517 4518 .comment-respond > *:first-child { 4519 margin-top: 0; 4520 } 4521 4522 .comment-respond > *:last-child { 4523 margin-bottom: 0; 4524 } 4525 4526 .comment-respond > *:last-child.comment-form { 4527 margin-bottom: var(--global--spacing-vertical); 4528 } 4529 4530 .comment-author { 4531 padding-top: 3px; 4532 } 4533 4534 .comment-author .url { 4535 color: currentColor; 4536 } 4537 4538 .comment-form { 4539 display: flex; 4540 flex-wrap: wrap; 4541 } 4542 4543 .comment-form > * { 4544 flex-basis: 100%; 4545 } 4546 4547 .comment-form .comment-notes { 4548 font-size: var(--global--font-size-sm); 4549 } 4550 4551 .comment-form .comment-form-url, 4552 .comment-form .comment-form-comment { 4553 width: 100%; 4554 } 4555 4556 .comment-form .comment-form-author, 4557 .comment-form .comment-form-email { 4558 flex-basis: 0; 4559 flex-grow: 1; 4560 } 4561 @media only screen and (max-width: 481px) { 4562 4563 .comment-form .comment-form-author, 4564 .comment-form .comment-form-email { 4565 flex-basis: 100%; 4566 } 4567 } 4568 4569 .comment-form .comment-form-cookies-consent > label, 4570 .comment-form .comment-notes { 4571 font-size: var(--global--font-size-xs); 4572 font-weight: normal; 4573 } 4574 4575 .comment-form > p { 4576 margin-bottom: var(--global--spacing-unit); 4577 } 4578 4579 .comment-form > p:first-of-type { 4580 margin-top: 0; 4581 } 4582 4583 .comment-form > p:last-of-type { 4584 margin-bottom: 0; 4585 } 4586 4587 .comment-form > p label, 4588 .comment-form > p input[type=email], 4589 .comment-form > p input[type=text], 4590 .comment-form > p input[type=url], 4591 .comment-form > p textarea { 4592 display: block; 4593 font-size: var(--global--font-size-sm); 4594 margin-bottom: calc(.5 * var(--global--spacing-unit)); 4595 width: 100%; 4596 font-weight: var(--form--label-weight); 4597 } 4598 4599 .comment-form > p.comment-form-cookies-consent { 4600 display: flex; 4601 } 4602 @media only screen and (min-width: 482px) { 4603 4604 .comment-form > p.comment-form-author { 4605 margin-right: calc(1.5 * var(--global--spacing-horizontal)); 4606 } 4607 4608 .comment-form > p.comment-notes, 4609 .comment-form > p.logged-in-as { 4610 display: block; 4611 } 4612 } 4613 4614 .menu-button-container { 4615 display: none; 4616 justify-content: space-between; 4617 position: absolute; 4618 right: 0; 4619 padding-top: calc(0.5 * var(--global--spacing-vertical)); 4620 padding-bottom: calc(0.25 * var(--global--spacing-vertical)); 4621 } 4622 @media only screen and (max-width: 481px) { 4623 4624 .menu-button-container { 4625 display: flex; 4626 } 4627 } 4628 4629 .menu-button-container #primary-mobile-menu { 4630 display: flex; 4631 margin-left: auto; 4632 padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); 4633 font-size: var(--primary-nav--font-size-button); 4634 font-weight: var(--primary-nav--font-weight-button); 4635 background-color: transparent; 4636 border: none; 4637 color: var(--primary-nav--color-link); 4638 } 4639 4640 .menu-button-container #primary-mobile-menu .dropdown-icon { 4641 display: flex; 4642 align-items: center; 4643 } 4644 4645 .menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { 4646 margin-left: calc(0.25 * var(--global--spacing-unit)); 4647 } 4648 4649 .menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon { 4650 position: relative; 4651 top: -1px; 4652 } 4653 4654 .menu-button-container #primary-mobile-menu .dropdown-icon.close { 4655 display: none; 4656 } 4657 4658 .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open { 4659 display: none; 4660 } 4661 4662 .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { 4663 display: flex; 4664 } 4665 4666 .has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { 4667 animation-name: twentytwentyone-close-button-transition; 4668 animation-duration: 0.3s; 4669 } 4670 4671 .primary-navigation-open .menu-button-container { 4672 width: 100%; 4673 z-index: 500; 4674 background-color: var(--global--color-background); 4675 } 4676 4677 .primary-navigation-open .menu-button-container #primary-mobile-menu { 4678 position: static; 4679 } 4680 4681 .primary-navigation { 4682 position: absolute; 4683 top: var(--global--admin-bar--height); 4684 right: 0; 4685 color: var(--primary-nav--color-text); 4686 font-size: var(--primary-nav--font-size); 4687 line-height: 1.15; 4688 margin-top: 0; 4689 margin-bottom: 0; 4690 } 4691 4692 .primary-navigation > .primary-menu-container { 4693 position: fixed; 4694 visibility: hidden; 4695 opacity: 0; 4696 top: 0; 4697 right: 0; 4698 bottom: 0; 4699 left: 0; 4700 padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); 4701 padding-left: var(--global--spacing-unit); 4702 padding-right: var(--global--spacing-unit); 4703 padding-bottom: var(--global--spacing-horizontal); 4704 background-color: var(--global--color-background); 4705 transition: all 0.15s ease-in-out; 4706 transform: translateY(var(--global--spacing-vertical)); 4707 } 4708 @media only screen and (max-width: 481px) { 4709 4710 .primary-navigation > .primary-menu-container { 4711 height: 100vh; 4712 z-index: 499; 4713 overflow-x: hidden; 4714 overflow-y: auto; 4715 border: 2px solid transparent; 4716 } 4717 4718 .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4719 position: fixed; 4720 transform: translateY(0) translateX(100%); 4721 } 4722 4723 .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4724 top: var(--global--admin-bar--height); 4725 } 4726 4727 .admin-bar .primary-navigation > .primary-menu-container { 4728 height: calc(100vh - var(--global--admin-bar--height)); 4729 } 4730 4731 .primary-navigation > .primary-menu-container:focus { 4732 border: 2px solid var(--global--color-primary); 4733 } 4734 } 4735 @media only screen and (max-width: 481px) { 4736 4737 .primary-navigation-open .primary-navigation { 4738 width: 100%; 4739 position: fixed; 4740 z-index: 2; 4741 } 4742 } 4743 4744 .primary-navigation-open .primary-navigation > .primary-menu-container { 4745 position: absolute; 4746 visibility: visible; 4747 opacity: 1; 4748 transform: translateY(0); 4749 } 4750 @media only screen and (max-width: 481px) { 4751 4752 .primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4753 transform: translateX(0) translateY(0); 4754 } 4755 } 4756 @media only screen and (min-width: 482px) { 4757 4758 .primary-navigation { 4759 position: relative; 4760 margin-left: auto; 4761 } 4762 4763 .primary-navigation > .primary-menu-container { 4764 visibility: visible; 4765 opacity: 1; 4766 position: relative; 4767 padding: 0; 4768 background-color: transparent; 4769 overflow: initial; 4770 transform: none; 4771 } 4772 4773 .primary-navigation #toggle-menu { 4774 display: none; 4775 } 4776 4777 .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { 4778 display: none; 4779 } 4780 4781 .admin-bar .primary-navigation { 4782 top: initial; 4783 } 4784 4785 .admin-bar .primary-navigation > .primary-menu-container { 4786 top: initial; 4787 } 4788 } 4789 4790 .primary-navigation > div > .menu-wrapper { 4791 display: flex; 4792 justify-content: flex-start; 4793 flex-wrap: wrap; 4794 list-style: none; 4795 margin: 0; 4796 max-width: none; 4797 padding-left: 0; 4798 position: relative; 4799 } 4800 @media only screen and (max-width: 481px) { 4801 4802 .primary-navigation > div > .menu-wrapper { 4803 padding-bottom: 100px; 4804 } 4805 4806 .primary-navigation > div > .menu-wrapper ul { 4807 padding-left: 0; 4808 } 4809 } 4810 4811 .primary-navigation > div > .menu-wrapper li { 4812 display: block; 4813 position: relative; 4814 width: 100%; 4815 } 4816 @media only screen and (min-width: 482px) { 4817 4818 .primary-navigation > div > .menu-wrapper li { 4819 margin: 0; 4820 width: inherit; 4821 } 4822 4823 .primary-navigation > div > .menu-wrapper li:last-child { 4824 margin-right: 0; 4825 } 4826 } 4827 4828 .primary-navigation > div > .menu-wrapper .sub-menu-toggle { 4829 display: flex; 4830 height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); 4831 width: 44px; 4832 padding: 0; 4833 justify-content: center; 4834 align-items: center; 4835 background: transparent; 4836 color: currentColor; 4837 border: none; 4838 } 4839 4840 .primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus { 4841 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 4842 } 4843 @media only screen and (max-width: 481px) { 4844 4845 .primary-navigation > div > .menu-wrapper .sub-menu-toggle { 4846 display: none; 4847 } 4848 } 4849 4850 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus, 4851 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { 4852 height: 100%; 4853 display: flex; 4854 align-items: center; 4855 } 4856 4857 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg, 4858 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg { 4859 margin-top: -1px; 4860 } 4861 4862 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { 4863 display: none; 4864 } 4865 4866 .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus { 4867 display: flex; 4868 } 4869 4870 .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus { 4871 display: none; 4872 } 4873 4874 .primary-navigation > div > .menu-wrapper > li > .sub-menu { 4875 position: relative; 4876 } 4877 @media only screen and (min-width: 482px) { 4878 4879 .primary-navigation > div > .menu-wrapper > li > .sub-menu { 4880 left: 0; 4881 margin: 0; 4882 min-width: max-content; 4883 position: absolute; 4884 top: 100%; 4885 padding-top: 3px; 4886 transition: all 0.5s ease; 4887 z-index: 88888; 4888 } 4889 4890 .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, 4891 .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { 4892 content: ""; 4893 display: block; 4894 position: absolute; 4895 width: 0; 4896 top: -10px; 4897 left: var(--global--spacing-horizontal); 4898 border-style: solid; 4899 border-color: var(--primary-nav--border-color) transparent; 4900 border-width: 0 7px 10px 7px; 4901 } 4902 4903 .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { 4904 top: -9px; 4905 border-color: var(--global--color-background) transparent; 4906 } 4907 4908 .primary-navigation > div > .menu-wrapper > li > .sub-menu li { 4909 background: var(--global--color-background); 4910 } 4911 4912 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { 4913 4914 /* rtl:ignore */ 4915 left: 0; 4916 4917 /* rtl:ignore */ 4918 right: auto; 4919 } 4920 4921 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, 4922 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { 4923 4924 /* rtl:ignore */ 4925 left: var(--global--spacing-horizontal); 4926 4927 /* rtl:ignore */ 4928 right: auto; 4929 } 4930 4931 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { 4932 4933 /* rtl:ignore */ 4934 right: 0; 4935 4936 /* rtl:ignore */ 4937 left: auto; 4938 } 4939 4940 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, 4941 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { 4942 4943 /* rtl:ignore */ 4944 left: auto; 4945 4946 /* rtl:ignore */ 4947 right: var(--global--spacing-horizontal); 4948 } 4949 } 4950 4951 .primary-navigation .primary-menu > .menu-item:hover > a { 4952 color: var(--primary-nav--color-link-hover); 4953 } 4954 @media only screen and (min-width: 482px) { 4955 4956 .primary-navigation .primary-menu-container { 4957 margin-right: calc(0px - var(--primary-nav--padding)); 4958 margin-left: calc(0px - var(--primary-nav--padding)); 4959 } 4960 4961 .primary-navigation .primary-menu-container > ul > .menu-item { 4962 display: flex; 4963 } 4964 4965 .primary-navigation .primary-menu-container > ul > .menu-item > a { 4966 padding-left: var(--primary-nav--padding); 4967 padding-right: var(--primary-nav--padding); 4968 } 4969 4970 .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { 4971 margin-left: calc(5px - var(--primary-nav--padding)); 4972 } 4973 } 4974 4975 .primary-navigation a { 4976 display: block; 4977 font-family: var(--primary-nav--font-family-mobile); 4978 font-size: var(--primary-nav--font-size-mobile); 4979 font-weight: var(--primary-nav--font-weight); 4980 padding: var(--primary-nav--padding) 0; 4981 text-decoration: none; 4982 } 4983 @media only screen and (min-width: 482px) { 4984 4985 .primary-navigation a { 4986 display: block; 4987 font-family: var(--primary-nav--font-family); 4988 font-size: var(--primary-nav--font-size); 4989 font-weight: var(--primary-nav--font-weight); 4990 } 4991 } 4992 4993 .primary-navigation a + svg { 4994 fill: var(--primary-nav--color-text); 4995 } 4996 4997 .primary-navigation a:hover, 4998 .primary-navigation a:link, 4999 .primary-navigation a:visited { 5000 color: var(--primary-nav--color-link-hover); 5001 } 5002 5003 .primary-navigation a:hover { 5004 text-decoration: underline; 5005 text-decoration-style: dotted; 5006 } 5007 5008 .primary-navigation a:focus { 5009 position: relative; 5010 z-index: 99999; 5011 outline-offset: 0; 5012 text-decoration-thickness: 2px; 5013 } 5014 5015 .primary-navigation .current-menu-item > a:first-child, 5016 .primary-navigation .current_page_item > a:first-child { 5017 text-decoration: underline; 5018 text-decoration-style: solid; 5019 } 5020 5021 .primary-navigation .current-menu-item > a:first-child:hover, 5022 .primary-navigation .current_page_item > a:first-child:hover { 5023 text-decoration: underline; 5024 text-decoration-style: dotted; 5025 } 5026 5027 .primary-navigation .sub-menu { 5028 margin: 0; 5029 padding: 0; 5030 list-style: none; 5031 margin-left: var(--primary-nav--padding); 5032 border: 1px solid var(--primary-nav--border-color); 5033 } 5034 5035 .primary-navigation .sub-menu .sub-menu { 5036 border: none; 5037 } 5038 @media only screen and (min-width: 482px) { 5039 5040 .primary-navigation .sub-menu > .menu-item > .sub-menu { 5041 padding: 0; 5042 } 5043 } 5044 @media only screen and (max-width: 481px) { 5045 5046 .primary-navigation .sub-menu .menu-item:last-child { 5047 margin-bottom: 0; 5048 } 5049 } 5050 5051 .primary-navigation .sub-menu .menu-item > a { 5052 padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); 5053 display: block; 5054 font-size: var(--primary-nav--font-size-sub-menu-mobile); 5055 font-style: var(--primary-nav--font-style-sub-menu-mobile); 5056 } 5057 @media only screen and (min-width: 482px) { 5058 5059 .primary-navigation .sub-menu .menu-item > a { 5060 font-size: var(--primary-nav--font-size-sub-menu); 5061 font-style: var(--primary-nav--font-style); 5062 } 5063 } 5064 5065 .primary-navigation .menu-item-has-children > .svg-icon { 5066 display: none; 5067 } 5068 @media only screen and (min-width: 482px) { 5069 5070 .primary-navigation .menu-item-has-children > .svg-icon { 5071 display: inline-block; 5072 height: 100%; 5073 } 5074 5075 .primary-navigation .menu-item-has-children .sub-menu .svg-icon { 5076 display: none; 5077 } 5078 } 5079 5080 .primary-navigation .menu-item-description { 5081 display: block; 5082 clear: both; 5083 font-size: var(--global--font-size-xs); 5084 text-transform: none; 5085 line-height: 1.7; 5086 } 5087 5088 .primary-navigation .menu-item-description > span { 5089 display: inline-block; 5090 } 5091 5092 @media only screen and (max-width: 481px) { 5093 5094 .lock-scrolling .site { 5095 position: fixed; 5096 max-width: 100%; 5097 width: 100%; 5098 } 5099 } 5100 @keyframes twentytwentyone-close-button-transition { 5101 5102 from { 5103 opacity: 0; 5104 } 5105 5106 to { 5107 opacity: 1; 5108 } 5109 } 5110 5111 .footer-navigation { 5112 margin-top: calc(2 * var(--global--spacing-vertical)); 5113 margin-bottom: var(--global--spacing-vertical); 5114 color: var(--footer--color-text); 5115 font-size: var(--global--font-size-xs); 5116 font-family: var(--footer--font-family); 5117 } 5118 5119 .footer-navigation-wrapper { 5120 display: flex; 5121 justify-content: center; 5122 flex-wrap: wrap; 5123 list-style: none; 5124 padding-left: 0; 5125 } 5126 5127 .footer-navigation-wrapper li { 5128 display: inline; 5129 line-height: 3; 5130 } 5131 5132 .footer-navigation-wrapper li a { 5133 padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); 5134 transition: transform 0.1s ease; 5135 color: var(--footer--color-link); 5136 } 5137 5138 .footer-navigation-wrapper li a:link, 5139 .footer-navigation-wrapper li a:visited, 5140 .footer-navigation-wrapper li a:active { 5141 color: var(--footer--color-link); 5142 } 5143 5144 .footer-navigation-wrapper li a:hover { 5145 text-decoration: underline; 5146 text-decoration-style: dotted; 5147 text-decoration-skip-ink: none; 5148 color: var(--footer--color-link-hover); 5149 } 5150 5151 .is-dark-theme .footer-navigation-wrapper li a:focus .svg-icon { 5152 fill: var(--wp--style--color--link, var(--global--color-background)); 5153 } 5154 5155 .has-background-white .footer-navigation-wrapper li a:focus .svg-icon { 5156 fill: var(--wp--style--color--link, var(--global--color-white)); 5157 } 5158 5159 .footer-navigation-wrapper li .svg-icon { 5160 vertical-align: middle; 5161 fill: var(--footer--color-link); 5162 } 5163 5164 .footer-navigation-wrapper li .svg-icon:hover { 5165 transform: scale(1.1); 5166 } 5167 5168 .footer-navigation-wrapper .sub-menu-toggle, 5169 .footer-navigation-wrapper .menu-item-description { 5170 display: none; 5171 } 5172 5173 /* Next/Previous navigation */ 5174 .navigation { 5175 color: var(--global--color-primary); 5176 } 5177 5178 .navigation a { 5179 color: var(--global--color-primary); 5180 text-decoration: none; 5181 } 5182 5183 .navigation a:hover { 5184 color: var(--global--color-primary-hover); 5185 text-decoration: underline; 5186 text-decoration-style: dotted; 5187 } 5188 5189 .navigation a:focus { 5190 color: var(--global--color-secondary); 5191 } 5192 5193 .navigation a:active { 5194 color: var(--global--color-primary); 5195 } 5196 5197 .navigation .nav-links > * { 5198 min-width: 44px; 5199 min-height: 44px; 5200 } 5201 5202 .navigation .nav-links .nav-next a, 5203 .navigation .nav-links .nav-previous a { 5204 display: flex; 5205 flex-direction: column; 5206 } 5207 5208 .navigation .nav-links .dots { 5209 text-align: center; 5210 } 5211 @media only screen and (min-width: 592px) { 5212 5213 .navigation .nav-links { 5214 display: flex; 5215 justify-content: center; 5216 flex-wrap: wrap; 5217 } 5218 5219 .navigation .nav-links .nav-next, 5220 .navigation .nav-links .nav-previous { 5221 flex: 0 1 auto; 5222 margin-bottom: inherit; 5223 margin-top: inherit; 5224 max-width: calc(50% - (0.5 * var(--global--spacing-unit))); 5225 } 5226 5227 .navigation .nav-links .nav-next { 5228 text-align: right; 5229 } 5230 } 5231 5232 .navigation .svg-icon { 5233 display: inline-block; 5234 fill: currentColor; 5235 vertical-align: middle; 5236 position: relative; 5237 } 5238 5239 .navigation .nav-previous .svg-icon, 5240 .navigation .prev .svg-icon { 5241 top: -2px; 5242 margin-right: calc(0.25 * var(--global--spacing-unit)); 5243 } 5244 5245 .navigation .nav-next .svg-icon, 5246 .navigation .next .svg-icon { 5247 top: -1px; 5248 margin-left: calc(0.25 * var(--global--spacing-unit)); 5249 } 5250 5251 .post-navigation { 5252 margin: var(--global--spacing-vertical) auto; 5253 } 5254 @media only screen and (min-width: 822px) { 5255 5256 .post-navigation { 5257 margin: var(--global--spacing-vertical) auto; 5258 } 5259 } 5260 5261 .post-navigation .meta-nav { 5262 line-height: var(--global--line-height-body); 5263 color: var(--global--color-primary); 5264 } 5265 5266 .post-navigation .post-title { 5267 display: inline-block; 5268 font-family: var(--global--font-primary); 5269 font-size: var(--global--font-size-lg); 5270 font-weight: var(--pagination--font-weight-strong); 5271 line-height: var(--global--line-height-heading); 5272 } 5273 @media only screen and (min-width: 822px) { 5274 5275 .post-navigation .post-title { 5276 margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; 5277 } 5278 } 5279 @media only screen and (min-width: 482px) { 5280 5281 .post-navigation .nav-links { 5282 justify-content: space-between; 5283 } 5284 } 5285 5286 .post-navigation .nav-next, 5287 .post-navigation .nav-previous { 5288 margin-top: var(--global--spacing-vertical); 5289 margin-bottom: var(--global--spacing-vertical); 5290 } 5291 5292 .post-navigation .nav-next:first-child, 5293 .post-navigation .nav-previous:first-child { 5294 margin-top: 0; 5295 } 5296 5297 .post-navigation .nav-next:last-child, 5298 .post-navigation .nav-previous:last-child { 5299 margin-bottom: 0; 5300 } 5301 5302 .pagination, 5303 .comments-pagination { 5304 border-top: 3px solid var(--global--color-border); 5305 padding-top: var(--global--spacing-vertical); 5306 margin: var(--global--spacing-vertical) auto; 5307 } 5308 @media only screen and (min-width: 822px) { 5309 5310 .pagination, 5311 .comments-pagination { 5312 margin: var(--global--spacing-vertical) auto; 5313 } 5314 } 5315 5316 .pagination .nav-links, 5317 .comments-pagination .nav-links { 5318 margin-top: calc(-1 * var(--global--spacing-vertical)); 5319 } 5320 5321 .pagination .nav-links a:hover, 5322 .comments-pagination .nav-links a:hover { 5323 color: var(--pagination--color-link-hover); 5324 } 5325 5326 .is-dark-theme .pagination .nav-links a:active, 5327 .is-dark-theme .pagination .nav-links a:hover:active, 5328 .is-dark-theme .pagination .nav-links a:hover:focus, 5329 .is-dark-theme .comments-pagination .nav-links a:active, 5330 .is-dark-theme .comments-pagination .nav-links a:hover:active, 5331 .is-dark-theme .comments-pagination .nav-links a:hover:focus { 5332 color: var(--global--color-background); 5333 } 5334 5335 .has-background-white .pagination .nav-links a:active, 5336 .has-background-white .pagination .nav-links a:hover:active, 5337 .has-background-white .pagination .nav-links a:hover:focus, 5338 .has-background-white .comments-pagination .nav-links a:active, 5339 .has-background-white .comments-pagination .nav-links a:hover:active, 5340 .has-background-white .comments-pagination .nav-links a:hover:focus { 5341 color: var(--global--color-white); 5342 } 5343 5344 .pagination .nav-links > *, 5345 .comments-pagination .nav-links > * { 5346 color: var(--pagination--color-text); 5347 font-family: var(--pagination--font-family); 5348 font-size: var(--pagination--font-size); 5349 font-weight: var(--pagination--font-weight); 5350 margin-top: var(--global--spacing-vertical); 5351 margin-left: calc(0.66 * var(--global--spacing-unit)); 5352 margin-right: calc(0.66 * var(--global--spacing-unit)); 5353 } 5354 5355 .pagination .nav-links > *.current, 5356 .comments-pagination .nav-links > *.current { 5357 text-decoration: underline; 5358 } 5359 5360 .pagination .nav-links > *:not(.dots):not(.current):hover, 5361 .comments-pagination .nav-links > *:not(.dots):not(.current):hover { 5362 text-decoration-style: dotted; 5363 } 5364 5365 .pagination .nav-links > *:first-child, 5366 .comments-pagination .nav-links > *:first-child { 5367 margin-left: 0; 5368 } 5369 5370 .pagination .nav-links > *:last-child, 5371 .comments-pagination .nav-links > *:last-child { 5372 margin-right: 0; 5373 } 5374 5375 .pagination .nav-links > *.next, 5376 .comments-pagination .nav-links > *.next { 5377 margin-left: auto; 5378 } 5379 5380 .pagination .nav-links > *.prev, 5381 .comments-pagination .nav-links > *.prev { 5382 margin-right: auto; 5383 } 5384 @media only screen and (max-width: 821px) { 5385 5386 .pagination .nav-links, 5387 .comments-pagination .nav-links { 5388 display: flex; 5389 flex-wrap: wrap; 5390 } 5391 5392 .pagination .page-numbers, 5393 .comments-pagination .page-numbers { 5394 display: none; 5395 } 5396 5397 .pagination .page-numbers.prev, 5398 .pagination .page-numbers.next, 5399 .comments-pagination .page-numbers.prev, 5400 .comments-pagination .page-numbers.next { 5401 display: inline-block; 5402 flex: 0 1 auto; 5403 } 5404 } 5405 @media only screen and (max-width: 481px) { 5406 5407 .pagination .nav-short, 5408 .comments-pagination .nav-short { 5409 display: none; 5410 } 5411 } 5412 5413 .comments-pagination { 5414 padding-top: calc(0.66 * var(--global--spacing-vertical)); 5415 margin: calc(3 * var(--global--spacing-vertical)) auto; 5416 } 5417 @media only screen and (min-width: 822px) { 5418 5419 .comments-pagination { 5420 margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; 5421 } 5422 } 5423 5424 .comments-pagination .nav-links > * { 5425 font-size: var(--global--font-size-md); 5426 } 5427 5428 .widget-area { 5429 margin-top: calc(6 * var(--global--spacing-vertical)); 5430 padding-bottom: calc(var(--global--spacing-vertical) / 3); 5431 color: var(--footer--color-text); 5432 font-size: var(--footer--font-size); 5433 font-family: var(--footer--font-family); 5434 } 5435 @media only screen and (min-width: 652px) { 5436 5437 .widget-area { 5438 display: grid; 5439 grid-template-columns: repeat(2, 1fr); 5440 column-gap: calc(2 * var(--global--spacing-horizontal)); 5441 } 5442 } 5443 @media only screen and (min-width: 1024px) { 5444 5445 .widget-area { 5446 grid-template-columns: repeat(3, 1fr); 5447 } 5448 } 5449 @media only screen and (max-width: 481px) { 5450 5451 .widget-area { 5452 margin-top: calc(3 * var(--global--spacing-vertical)); 5453 } 5454 } 5455 5456 .widget-area ul { 5457 list-style-type: none; 5458 padding: 0; 5459 } 5460 5461 .widget-area ul li { 5462 line-height: var(--widget--line-height-list); 5463 } 5464 5465 .widget-area ul.sub-menu, 5466 .widget-area ul.children { 5467 margin-left: var(--widget--spacing-menu); 5468 } 5469 5470 .widget-area ul .sub-menu-toggle { 5471 display: none; 5472 } 5473 5474 .widget-area a { 5475 color: var(--footer--color-link); 5476 text-decoration: underline; 5477 text-decoration-style: solid; 5478 text-decoration-color: currentColor; 5479 } 5480 5481 .widget-area a:link, 5482 .widget-area a:visited, 5483 .widget-area a:active { 5484 color: var(--footer--color-link); 5485 } 5486 5487 .widget-area a:hover { 5488 color: var(--footer--color-link-hover); 5489 text-decoration-style: dotted; 5490 } 5491 5492 .widget-area .wp-block-social-links.alignright { 5493 margin-top: var(--global--spacing-vertical); 5494 justify-content: flex-end; 5495 } 5496 5497 .widget-area .wp-block-social-links.alignleft { 5498 margin-top: var(--global--spacing-vertical); 5499 } 5500 5501 .widget-area:after { 5502 content: ""; 5503 display: table; 5504 clear: both; 5505 } 5506 5507 .widget h1, 5508 .widget h2, 5509 .widget h3, 5510 .widget h4, 5511 .widget h5, 5512 .widget h6 { 5513 font-weight: var(--widget--font-weight-title); 5514 line-height: var(--widget--line-height-title); 5515 } 5516 5517 .widget h1 { 5518 font-size: var(--global--font-size-md); 5519 } 5520 5521 .widget h2 { 5522 font-size: var(--global--font-size-sm); 5523 } 5524 5525 .widget h3 { 5526 font-size: var(--global--font-size-xs); 5527 } 5528 5529 .widget h4 { 5530 font-size: var(--global--font-size-xs); 5531 } 5532 5533 .widget h5 { 5534 font-size: var(--global--font-size-xs); 5535 } 5536 5537 .widget h6 { 5538 font-size: var(--global--font-size-xs); 5539 } 5540 5541 .search-form { 5542 display: flex; 5543 flex-wrap: wrap; 5544 margin: auto; 5545 max-width: var(--responsive--aligndefault-width); 5546 } 5547 5548 .search-form > label { 5549 width: 100%; 5550 margin-bottom: 0; 5551 font-weight: var(--form--label-weight); 5552 } 5553 5554 .search-form .search-field { 5555 flex-grow: 1; 5556 max-width: inherit; 5557 margin-top: calc(var(--global--spacing-vertical) / 3); 5558 margin-right: calc(0.66 * var(--global--spacing-horizontal)); 5559 } 5560 5561 .search-form .search-submit { 5562 margin-top: calc(var(--global--spacing-vertical) / 3); 5563 margin-left: 10px; 5564 } 5565 5566 .widget_search > .search-form .search-field { 5567 margin-right: calc(-1 * var(--button--border-width)); 5568 -webkit-appearance: none; 5569 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 5570 } 5571 5572 .widget_search > .search-form .search-submit { 5573 margin-left: 0; 5574 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 5575 } 5576 5577 .widget_rss a.rsswidget .rss-widget-icon { 5578 display: none; 5579 } 5580 5581 /* Category 07 is for any utility classes that are not assigned to a specific component. */ 5582 .screen-reader-text { 5583 border: 0; 5584 clip: rect(1px, 1px, 1px, 1px); 5585 -webkit-clip-path: inset(50%); 5586 clip-path: inset(50%); 5587 height: 1px; 5588 margin: -1px; 5589 overflow: hidden; 5590 padding: 0; 5591 position: absolute !important; 5592 width: 1px; 5593 word-wrap: normal !important; 5594 word-break: normal; 5595 } 5596 5597 .skip-link:focus { 5598 background-color: #f1f1f1; 5599 border-radius: 3px; 5600 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 5601 clip: auto !important; 5602 -webkit-clip-path: none; 5603 clip-path: none; 5604 color: #21759b; 5605 display: block; 5606 font-size: 0.875rem; 5607 font-weight: 700; 5608 height: auto; 5609 left: 5px; 5610 line-height: normal; 5611 padding: 15px 23px 14px; 5612 text-decoration: none; 5613 top: 5px; 5614 width: auto; 5615 z-index: 100000; 5616 } 5617 5618 /* Do not show the outline on the skip link target. */ 5619 #content[tabindex="-1"]:focus { 5620 outline: 0; 5621 } 5622 5623 @media (prefers-reduced-motion) { 5624 5625 * { 5626 transition-delay: 0s !important; 5627 transition-duration: 0s !important; 5628 } 5629 } 5630 5631 .has-black-color[class] { 5632 color: var(--global--color-black); 5633 } 5634 5635 .has-black-color[class] > [class*=__inner-container] { 5636 --local--color-primary: var(--global--color-black, #000); 5637 color: var(--local--color-primary); 5638 } 5639 5640 .has-gray-color[class] { 5641 color: var(--global--color-gray); 5642 } 5643 5644 .has-gray-color[class] > [class*=__inner-container] { 5645 --local--color-primary: var(--global--color-gray, #000); 5646 color: var(--local--color-primary); 5647 } 5648 5649 .has-dark-gray-color[class] { 5650 color: var(--global--color-dark-gray); 5651 } 5652 5653 .has-dark-gray-color[class] > [class*=__inner-container] { 5654 --local--color-primary: var(--global--color-dark-gray, #000); 5655 color: var(--local--color-primary); 5656 } 5657 5658 .has-green-color[class] { 5659 color: var(--global--color-green); 5660 } 5661 5662 .has-green-color[class] > [class*=__inner-container] { 5663 --local--color-primary: var(--global--color-green, #fff); 5664 color: var(--local--color-primary); 5665 } 5666 5667 .has-blue-color[class] { 5668 color: var(--global--color-blue); 5669 } 5670 5671 .has-blue-color[class] > [class*=__inner-container] { 5672 --local--color-primary: var(--global--color-blue, #fff); 5673 color: var(--local--color-primary); 5674 } 5675 5676 .has-purple-color[class] { 5677 color: var(--global--color-purple); 5678 } 5679 5680 .has-purple-color[class] > [class*=__inner-container] { 5681 --local--color-primary: var(--global--color-purple, #fff); 5682 color: var(--local--color-primary); 5683 } 5684 5685 .has-red-color[class] { 5686 color: var(--global--color-red); 5687 } 5688 5689 .has-red-color[class] > [class*=__inner-container] { 5690 --local--color-primary: var(--global--color-red, #fff); 5691 color: var(--local--color-primary); 5692 } 5693 5694 .has-orange-color[class] { 5695 color: var(--global--color-orange); 5696 } 5697 5698 .has-orange-color[class] > [class*=__inner-container] { 5699 --local--color-primary: var(--global--color-orange, #fff); 5700 color: var(--local--color-primary); 5701 } 5702 5703 .has-yellow-color[class] { 5704 color: var(--global--color-yellow); 5705 } 5706 5707 .has-yellow-color[class] > [class*=__inner-container] { 5708 --local--color-primary: var(--global--color-yellow, #fff); 5709 color: var(--local--color-primary); 5710 } 5711 5712 .has-white-color[class] { 5713 color: var(--global--color-white); 5714 } 5715 5716 .has-white-color[class] > [class*=__inner-container] { 5717 --local--color-primary: var(--global--color-white, #fff); 5718 color: var(--local--color-primary); 5719 } 5720 5721 .has-background a, 5722 .has-background p, 5723 .has-background h1, 5724 .has-background h2, 5725 .has-background h3, 5726 .has-background h4, 5727 .has-background h5, 5728 .has-background h6 { 5729 color: currentColor; 5730 } 5731 5732 .has-black-background-color[class] { 5733 background-color: var(--global--color-black); 5734 } 5735 5736 .has-black-background-color[class] > [class*=__inner-container] { 5737 --local--color-background: var(--global--color-black, #000); 5738 background-color: var(--local--color-background); 5739 } 5740 5741 .has-dark-gray-background-color[class] { 5742 background-color: var(--global--color-dark-gray); 5743 } 5744 5745 .has-dark-gray-background-color[class] > [class*=__inner-container] { 5746 --local--color-background: var(--global--color-dark-gray, #000); 5747 background-color: var(--local--color-background); 5748 } 5749 5750 .has-gray-background-color[class] { 5751 background-color: var(--global--color-gray); 5752 } 5753 5754 .has-gray-background-color[class] > [class*=__inner-container] { 5755 --local--color-background: var(--global--color-gray, #000); 5756 background-color: var(--local--color-background); 5757 } 5758 5759 .has-light-gray-background-color[class] { 5760 background-color: var(--global--color-light-gray); 5761 } 5762 5763 .has-light-gray-background-color[class] > [class*=__inner-container] { 5764 --local--color-background: var(--global--color-light-gray, #fff); 5765 background-color: var(--local--color-background); 5766 } 5767 5768 .has-green-background-color[class] { 5769 background-color: var(--global--color-green); 5770 } 5771 5772 .has-green-background-color[class] > [class*=__inner-container] { 5773 --local--color-background: var(--global--color-green, #fff); 5774 background-color: var(--local--color-background); 5775 } 5776 5777 .has-blue-background-color[class] { 5778 background-color: var(--global--color-blue); 5779 } 5780 5781 .has-blue-background-color[class] > [class*=__inner-container] { 5782 --local--color-background: var(--global--color-blue, #fff); 5783 background-color: var(--local--color-background); 5784 } 5785 5786 .has-purple-background-color[class] { 5787 background-color: var(--global--color-purple); 5788 } 5789 5790 .has-purple-background-color[class] > [class*=__inner-container] { 5791 --local--color-background: var(--global--color-purple, #fff); 5792 background-color: var(--local--color-background); 5793 } 5794 5795 .has-red-background-color[class] { 5796 background-color: var(--global--color-red); 5797 } 5798 5799 .has-red-background-color[class] > [class*=__inner-container] { 5800 --local--color-background: var(--global--color-red, #fff); 5801 background-color: var(--local--color-background); 5802 } 5803 5804 .has-orange-background-color[class] { 5805 background-color: var(--global--color-orange); 5806 } 5807 5808 .has-orange-background-color[class] > [class*=__inner-container] { 5809 --local--color-background: var(--global--color-orange, #fff); 5810 background-color: var(--local--color-background); 5811 } 5812 5813 .has-yellow-background-color[class] { 5814 background-color: var(--global--color-yellow); 5815 } 5816 5817 .has-yellow-background-color[class] > [class*=__inner-container] { 5818 --local--color-background: var(--global--color-yellow, #fff); 5819 background-color: var(--local--color-background); 5820 } 5821 5822 .has-white-background-color[class] { 5823 background-color: var(--global--color-white); 5824 } 5825 5826 .has-white-background-color[class] > [class*=__inner-container] { 5827 --local--color-background: var(--global--color-white, #fff); 5828 background-color: var(--local--color-background); 5829 } 5830 5831 .has-background:not(.has-text-color).has-black-background-color[class], 5832 .has-background:not(.has-text-color).has-gray-background-color[class], 5833 .has-background:not(.has-text-color).has-dark-gray-background-color[class] { 5834 color: var(--global--color-white); 5835 } 5836 5837 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 5838 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 5839 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 5840 --local--color-primary: var(--global--color-background, #fff); 5841 color: var(--local--color-primary, var(--global--color-primary)); 5842 } 5843 5844 .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 5845 .is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 5846 .is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 5847 --local--color-primary: var(--global--color-primary, #000); 5848 } 5849 5850 .has-background:not(.has-text-color).has-green-background-color[class], 5851 .has-background:not(.has-text-color).has-blue-background-color[class], 5852 .has-background:not(.has-text-color).has-purple-background-color[class], 5853 .has-background:not(.has-text-color).has-red-background-color[class], 5854 .has-background:not(.has-text-color).has-orange-background-color[class], 5855 .has-background:not(.has-text-color).has-yellow-background-color[class], 5856 .has-background:not(.has-text-color).has-white-background-color[class] { 5857 color: var(--global--color-dark-gray); 5858 } 5859 5860 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 5861 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 5862 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 5863 .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 5864 .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 5865 .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 5866 .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 5867 --local--color-primary: var(--global--color-primary, #000); 5868 color: var(--local--color-primary, var(--global--color-primary)); 5869 } 5870 5871 .is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 5872 .is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 5873 .is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 5874 .is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 5875 .is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 5876 .is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 5877 .is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 5878 --local--color-primary: var(--global--color-background, #fff); 5879 } 5880 5881 .has-purple-to-yellow-gradient-background { 5882 background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); 5883 } 5884 5885 .has-yellow-to-purple-gradient-background { 5886 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); 5887 } 5888 5889 .has-green-to-yellow-gradient-background { 5890 background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); 5891 } 5892 5893 .has-yellow-to-green-gradient-background { 5894 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); 5895 } 5896 5897 .has-red-to-yellow-gradient-background { 5898 background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); 5899 } 5900 5901 .has-yellow-to-red-gradient-background { 5902 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); 5903 } 5904 5905 .has-purple-to-red-gradient-background { 5906 background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); 5907 } 5908 5909 .has-red-to-purple-gradient-background { 5910 background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); 5911 } 5912 5913 header *, 5914 main *, 5915 footer * { 5916 max-width: var(--global--spacing-measure); 5917 } 5918 5919 html, 5920 body, 5921 div, 5922 header, 5923 nav, 5924 article, 5925 figure, 5926 hr, 5927 main, 5928 section, 5929 footer { 5930 max-width: none; 5931 } 5932 5933 .is-IE.is-dark-theme { 5934 color: #fff; 5935 } 5936 5937 .is-IE.is-dark-theme *, 5938 .is-IE.is-dark-theme a, 5939 .is-IE.is-dark-theme .site-description, 5940 .is-IE.is-dark-theme .entry-title, 5941 .is-IE.is-dark-theme .entry-footer, 5942 .is-IE.is-dark-theme .widget-area, 5943 .is-IE.is-dark-theme .post-navigation .meta-nav, 5944 .is-IE.is-dark-theme .footer-navigation-wrapper li a:link, 5945 .is-IE.is-dark-theme .site-footer > .site-info, 5946 .is-IE.is-dark-theme .site-footer > .site-info a, 5947 .is-IE.is-dark-theme .site-footer > .site-info a:visited { 5948 color: #fff; 5949 } 5950 5951 .is-IE.is-dark-theme .sub-menu-toggle svg, 5952 .is-IE.is-dark-theme .sub-menu-toggle path, 5953 .is-IE.is-dark-theme .post-navigation .meta-nav svg, 5954 .is-IE.is-dark-theme .post-navigation .meta-nav path { 5955 fill: #fff; 5956 } 5957 5958 .is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li { 5959 background: #000; 5960 } 5961 @media only screen and (max-width: 481px) { 5962 5963 .is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container, 5964 .is-IE.is-dark-theme.primary-navigation-open .menu-button-container { 5965 background-color: #000; 5966 } 5967 } 5968 5969 .is-IE.is-dark-theme .skip-link:focus { 5970 color: #21759b; 5971 } 5972 5973 .is-IE .navigation .nav-links { 5974 display: block; 5975 } 5976 5977 .is-IE .post-thumbnail .wp-post-image { 5978 min-width: auto; 5979 }