.comment-form > p:first-of-type {
.comment-form > p:last-of-type {
.comment-form > p label {
.comment-form > p input[type=email] {
.comment-form > p input[type=text] {
.comment-form > p input[type=url] {
.comment-form > p textarea {
.comment-form > p.comment-form-cookies-consent {
@media only screen and (min-width: 482px) {
.comment-form > p.comment-form-author {
.comment-form > p.comment-notes,
.comment-form > p.logged-in-as {
justify-content: space-between;
.menu-button-container #primary-mobile-menu {
@media only screen and (max-width: 481px) {
.menu-button-container .button.button {
background-color: transparent;
.menu-button-container .button.button .dropdown-icon {
.menu-button-container .button.button .dropdown-icon .svg-icon {
.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: #d1e4dd;
.primary-navigation-open .menu-button-container #primary-mobile-menu {
.primary-navigation > .primary-menu-container {
padding-top: calc(2rem + 47px);
background-color: #d1e4dd;
transition: all 0.15s ease-in-out;
transform: translateY(30px);
@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 {
@media only screen and (max-width: 782px) {
.admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
.admin-bar .primary-navigation > .primary-menu-container {
height: calc(100vh - 32px);
@media only screen and (max-width: 782px) {
.admin-bar .primary-navigation > .primary-menu-container {
height: calc(100vh - 46px);
.primary-navigation > .primary-menu-container:focus {
border: 2px solid #28303d;
@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(27px + 1em);
.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
outline: 2px solid #28303d;
@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 {
border-color: #28303d transparent;
border-width: 0 7px 10px 7px;
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
border-color: #28303d transparent;
border-width: 0 7px 10px 7px;
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
border-color: #d1e4dd transparent;
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
.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 {
.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 {
.primary-navigation .primary-menu > .menu-item:hover > a {
@media only screen and (min-width: 482px) {
.primary-navigation .primary-menu-container {
.primary-navigation .primary-menu-container > ul > .menu-item {
.primary-navigation .primary-menu-container > ul > .menu-item > a {
.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@media only screen and (min-width: 482px) {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.primary-navigation a + svg {
.primary-navigation a:hover {