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