/* "Official Site" top banner */
/* FONTS */
@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: normal;
  src: url("/wp-content/plugins/how-you-know/assets/fonts/proxima-nova/3786F2_0_0.woff2") format("woff2"), url("/wp-content/plugins/how-you-know/assets/fonts/proxima-nova/3786F2_0_0.woff") format("woff");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: normal;
  src: url("/wp-content/plugins/how-you-know/assets/fonts/proxima-nova/3786F2_1_0.woff2") format("woff2"), url("/wp-content/plugins/how-you-know/assets/fonts/proxima-nova/3786F2_1_0.woff") format("woff");
}
/* make sure we don't get horizontal sliding layout on mobile */
div.official-website-banner {
  width: 100%;
  /*  overflow-x: hidden; some browsers don't place nice with this */
  overflow-y: visible;
  z-index: 99999;
}

.official-website-banner {
  --banner-font-size: 13px;
  --usa-banner-width: calc(min(90vw, 66rem));
  --icon-height: 19px;
  --color-background: #000300;
  --color-background-feature: #2491ff;
  --color-text: #d3d3d3;
  --color-focus: #d0ae56;
  --fw-normal: 400;
  --fw-bold: 600;
  --readable-width: 66ch;
  font-size: var(--banner-font-size);
  line-height: 1.5;
  background-color: var(--color-background);
  font-family: "Proxima Nova", Helvetica, sans-serif;
  font-weight: var(--fw-normal);
  color: var(--color-text);
}
.official-website-banner input,
.official-website-banner textarea,
.official-website-banner keygen,
.official-website-banner select,
.official-website-banner button {
  font-family: "Proxima Nova", Helvetica, sans-serif;
}
.official-website-banner a,
.official-website-banner strong,
.official-website-banner #official-website-banner__toggle {
  color: white;
  font-weight: var(--fw-bold);
}
.official-website-banner header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  padding: 7px 1rem;
}
.official-website-banner header strong {
  font-weight: var(--fw-bold);
}
.official-website-banner header .official-website-banner__description {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.official-website-banner header .official-website-banner__description .official-website-banner__flag {
  height: var(--banner-font-size);
  margin-right: 0.5rem;
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle {
  color: white;
  font-weight: var(--fw-bold);
  padding-left: 0.5rem;
  cursor: pointer;
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle:focus-visible, .official-website-banner header .official-website-banner__description #official-website-banner__toggle:hover {
  color: var(--color-focus);
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle:focus-visible > .official-website-banner__toggle__img svg g, .official-website-banner header .official-website-banner__description #official-website-banner__toggle:hover > .official-website-banner__toggle__img svg g {
  stroke: var(--color-focus);
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle[aria-expanded=true] .official-website-banner__toggle__img svg {
  transform: rotate(-180deg) translateY(2px);
}
.official-website-banner header .official-website-banner__description #official-website-banner__toggle > .official-website-banner__toggle_img svg {
  transition: transform 0.3s;
}
.official-website-banner header .official-website-translator {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  gap: 0.4rem;
}
.official-website-banner header .official-website-translator.has-menu {
  flex-direction: column;
  flex-wrap: nowrap;
}
.official-website-banner header .official-website-translator:not(.has-menu) #official-website-translator__toggle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}
.official-website-banner header .official-website-translator:not(.has-menu) a#official-website-translator__toggle {
  text-decoration: none;
}
.official-website-banner header .official-website-translator .official-website-translator__globe svg path {
  transition: fill 0.2s linear;
}
.official-website-banner header .official-website-translator #official-website-translator__toggle a {
  text-decoration: none;
  color: inherit;
}
.official-website-banner header .official-website-translator #official-website-translator__toggle:focus-visible, .official-website-banner header .official-website-translator #official-website-translator__toggle:hover {
  color: var(--color-focus);
}
.official-website-banner header .official-website-translator #official-website-translator__toggle:focus-visible a, .official-website-banner header .official-website-translator #official-website-translator__toggle:hover a {
  color: var(--color-focus);
}
.official-website-banner header .official-website-translator #official-website-translator__toggle:focus-visible .official-website-translator__globe svg path, .official-website-banner header .official-website-translator #official-website-translator__toggle:hover .official-website-translator__globe svg path {
  fill: var(--color-focus);
}
.official-website-banner header .official-website-translator #official-website-translator__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.official-website-banner header .official-website-translator #official-website-banner__translate-panel {
  --left-pad: 1rem;
  position: absolute;
  top: 23px;
  right: 0px;
  width: 16ch;
  background: var(--color-background);
  color: white;
}
.official-website-banner header .official-website-translator #official-website-banner__translate-panel header {
  padding-left: var(--left-pad);
  text-justify: left;
  background-color: var(--color-background-feature);
}
.official-website-banner header .official-website-translator #official-website-banner__translate-panel > div {
  padding: 0.5rem 0.5rem 0.75rem 1rem;
}
.official-website-banner header .official-website-translator #official-website-banner__translate-panel > div > * {
  display: block;
}
.official-website-banner #official-website-banner__details {
  padding-top: 1rem;
}
.official-website-banner #official-website-banner__details > * {
  max-width: var(--readable-width);
}
.official-website-banner [aria-hidden=true] {
  display: none;
}

/*# sourceMappingURL=official-banner.css.map */