font-size: var(--global--font-size-xs);
.comment-meta .comment-metadata .edit-link {
margin-left: var(--global--spacing-horizontal);
@media only screen and (min-width: 482px) {
.comment-meta .comment-author {
font-size: var(--global--font-size-sm);
line-height: var(--global--line-height-heading);
font-family: var(--global--font-primary);
margin-bottom: calc(1.7 * var(--global--spacing-vertical));
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
.trackback .comment-body {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
margin-top: var(--global--spacing-vertical);
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
.comment-respond > *:first-child {
.comment-respond > *:last-child {
.comment-respond > *:last-child.comment-form {
margin-bottom: var(--global--spacing-vertical);
.comment-form .comment-notes {
font-size: var(--global--font-size-sm);
.comment-form .comment-form-url,
.comment-form .comment-form-comment {
.comment-form .comment-form-author,
.comment-form .comment-form-email {
@media only screen and (max-width: 481px) {
.comment-form .comment-form-author,
.comment-form .comment-form-email {
.comment-form .comment-form-cookies-consent > label,
.comment-form .comment-notes {
font-size: var(--global--font-size-xs);
margin-bottom: var(--global--spacing-unit);
.comment-form > p:first-of-type {
.comment-form > p:last-of-type {
.comment-form > p input[type=email],
.comment-form > p input[type=text],
.comment-form > p input[type=url],
.comment-form > p textarea {
font-size: var(--global--font-size-sm);
margin-bottom: calc(.5 * var(--global--spacing-unit));
font-weight: var(--form--label-weight);
.comment-form > p.comment-form-cookies-consent {
@media only screen and (min-width: 482px) {
.comment-form > p.comment-form-author {
margin-right: calc(1.5 * var(--global--spacing-horizontal));
.comment-form > p.comment-notes,
.comment-form > p.logged-in-as {
justify-content: space-between;
padding-top: calc(0.5 * var(--global--spacing-vertical));
padding-bottom: calc(0.25 * var(--global--spacing-vertical));
.menu-button-container #primary-mobile-menu {
padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
@media only screen and (max-width: 481px) {
.menu-button-container .button.button {
font-size: var(--primary-nav--font-size-button);
font-weight: var(--primary-nav--font-weight-button);
background-color: transparent;
color: var(--primary-nav--color-link);
.menu-button-container .button.button .dropdown-icon {
.menu-button-container .button.button .dropdown-icon .svg-icon {
margin-left: calc(0.25 * var(--global--spacing-unit));
.menu-button-container .button.button .dropdown-icon.open .svg-icon {
.menu-button-container .button.button .dropdown-icon.close {
.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open {
.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close {
animation-name: twentytwentyone-close-button-transition;
animation-duration: 0.3s;
.primary-navigation-open .menu-button-container {
background-color: var(--global--color-background);
.primary-navigation-open .menu-button-container #primary-mobile-menu {
top: var(--global--admin-bar--height);
color: var(--primary-nav--color-text);
font-size: var(--primary-nav--font-size);
.primary-navigation > .primary-menu-container {
padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
padding-bottom: var(--global--spacing-horizontal);
background-color: var(--global--color-background);
transition: all 0.15s ease-in-out;
transform: translateY(var(--global--spacing-vertical));
@media only screen and (max-width: 481px) {
.primary-navigation > .primary-menu-container {
border: 2px solid transparent;
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
transform: translateY(0) translateX(100%);
.admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
top: var(--global--admin-bar--height);
.admin-bar .primary-navigation > .primary-menu-container {
height: calc(100vh - var(--global--admin-bar--height));
.primary-navigation > .primary-menu-container:focus {
border: 2px solid var(--global--color-primary);
@media only screen and (max-width: 481px) {
.primary-navigation-open .primary-navigation {
.primary-navigation-open .primary-navigation > .primary-menu-container {
transform: translateY(0);
@media only screen and (max-width: 481px) {
.primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
transform: translateX(0) translateY(0);
@media only screen and (min-width: 482px) {
.primary-navigation > .primary-menu-container {
background-color: transparent;
.primary-navigation #toggle-menu {
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul {
.admin-bar .primary-navigation {
.admin-bar .primary-navigation > .primary-menu-container {
.primary-navigation > div > .menu-wrapper {
justify-content: flex-start;
@media only screen and (max-width: 481px) {
.primary-navigation > div > .menu-wrapper {
.primary-navigation > div > .menu-wrapper ul {
.primary-navigation > div > .menu-wrapper li {
@media only screen and (min-width: 482px) {
.primary-navigation > div > .menu-wrapper li {
.primary-navigation > div > .menu-wrapper li:last-child() {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px);
.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
@media only screen and (max-width: 481px) {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus,
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg,
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus {
.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
@media only screen and (min-width: 482px) {
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
transition: all 0.5s ease;
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
left: var(--global--spacing-horizontal);
border-color: var(--primary-nav--border-color) transparent;
border-width: 0 7px 10px 7px;
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
border-color: var(--global--color-background) transparent;
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
background: var(--global--color-background);
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left {
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
left: var(--global--spacing-horizontal);
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before,
.primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {