@charset "UTF-8";
/* Variables */
:root {
  --mp3-progress-width: 0;
  --clip-progress-width: 0;
}

/* Resets */
*, *:before, *:after {
  box-sizing: border-box;
}

* {
  color: #fff;
}

h1, h2, h3, h4, p, li, th, td, span, legend, pre, output, strong, em, b {
  color: #ccc;
}

label {
  color: #bbb;
}

html, button, input, select, textarea {
  font-family: sans-serif;
}

html {
  font-size: 1em;
  line-height: 1.4;
  scroll-behavior: smooth;
}

main {
  position: relative;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
}

font {
  color: inherit;
}

input, select, textarea {
  font-size: 1em;
}

input:not([type=radio]), textarea, select {
  background: #500;
  color: #fff;
  border: none;
  padding: 0.375em 0.75em;
  border-radius: 0.1875em;
  width: 100%;
}

/* Fonts */
@font-face {
  font-family: "Cooper Black";
  src: url("fonts/cooper-black-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* Overall scaling */
@media screen and (min-width: 1250px) {
  html {
    font-size: 1.025em;
  }
}
@media screen and (min-width: 1350px) {
  html {
    font-size: 1.05em;
  }
}
@media screen and (min-width: 1450px) {
  html {
    font-size: 1.1em;
  }
}
@media screen and (min-width: 1550px) {
  html {
    font-size: 1.14em;
  }
}
@media screen and (min-width: 1650px) {
  html {
    font-size: 1.18em;
  }
}
/* Standard box shadow */
/* General CSS code */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

object {
  outline: none;
}

.offset {
  position: absolute;
  top: -9000px;
  left: -9000px;
}

/* Site-specific code */
html {
  text-size-adjust: 100%;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Arial", sans-serif;
  font-size: 100%;
  color: #efefef;
  margin: 0;
}

@media screen and (min-width: 850px) {
  body {
    margin: 0.625em;
  }
}
a:link {
  color: #f00;
  text-decoration: none;
}
a:visited {
  color: #f00;
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    color: #fff;
    text-decoration: none;
  }
}

p {
  font-size: 1.125em;
  line-height: 1.5;
  margin: 0 0 0 0.0625em;
}

p + p, p + div, div + p {
  margin-top: 0.5em;
}

h1 {
  font-weight: bold;
  font-size: 1.375em;
  margin: 0.5em 0;
}

h2 {
  font-weight: bold;
  font-size: 1.1875em;
  margin: 0.5em 0;
}

h3 {
  font-weight: bold;
  font-size: 1em;
  margin: 0.5em 0;
}

button {
  display: block;
  outline: 0;
  min-width: 2.5em;
  background-color: #500;
  color: #ddd;
  font-weight: normal;
  font-size: 0.9375em;
  letter-spacing: 0.025em;
  height: 1.85em;
  line-height: 1.15;
  padding: 0 0.9em;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.85);
  border-radius: 1.5625em;
  border: 0.06666667em solid #f00;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
@media (hover: hover) {
  button:hover {
    background-color: #900;
  }
}

img {
  border-style: none;
  max-width: 100%;
}

ul {
  list-style: outside;
  margin-left: 1.1875em;
}

li {
  font-size: 1em;
}

.image-right {
  display: block;
  margin: 0 0 0.5em 0;
}

.image-left {
  display: block;
  margin: 0 0 0.5em 0;
}

.image-above {
  display: block;
  margin: 0 0 0.5em 0;
}

.image-large {
  border-radius: 1em;
}

.image-medium {
  border-radius: 0.75em;
}

.image-small {
  border-radius: 0.5em;
}

@media screen and (min-width: 500px) {
  .image-right {
    float: right;
    margin: 0 0 0.25em 1em;
  }
  .image-right.image-large {
    margin: 0 0 0.5em 1em;
  }
  .image-left {
    float: left;
    margin: 0 1em 0.25em 0;
  }
  .image-left.image-large {
    margin: 0 1em 0.5em 0;
  }
  .image-above.image-large {
    margin: 0 0 1em 0;
  }
}
@keyframes mp3pulse {
  0% {
    color: #f00;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #f00;
  }
}
.inline-mp3 {
  display: inline-block;
  position: relative;
  font-size: 1.2em;
  padding-left: 2em;
  text-indent: -0.75em;
  color: #b8b8b8;
  background: url("../images/icon-audio-play2.png") no-repeat 0.125em 0.1875em;
  background-size: 0.75em auto;
  cursor: pointer;
}
@media (hover: hover) {
  .inline-mp3:hover {
    background-image: url("../images/icon-audio-play3.png");
    color: #fff;
  }
}
.inline-mp3 em {
  pointer-events: none;
}
.inline-mp3.mp3-playing {
  background-image: url("../images/icon-audio-pause2.png");
  background-size: 0.75em auto;
  color: #fff;
}
.inline-mp3.mp3-playing:before {
  content: "";
  position: absolute;
  bottom: 0.125em;
  width: var(--mp3-progress-width);
  border-bottom: 0.125em solid #c00;
}
@media (hover: hover) {
  .inline-mp3.mp3-playing:hover {
    background-image: url("../images/icon-audio-pause-bright.png");
  }
}

#mp3-player {
  display: none;
}

.audio {
  display: block;
  padding: 0.425em 0;
  text-wrap: nowrap;
  width: 5em;
  overflow-x: hidden;
}

.scroll-to-header {
  scroll-margin-top: 4.25rem;
}

@media screen and (min-width: 575px) {
  .scroll-to-header {
    scroll-margin-top: 4.75rem;
  }
}
@media screen and (min-width: 650px) {
  .scroll-to-header {
    scroll-margin-top: 5rem;
  }
}
@media screen and (min-width: 750px) {
  .scroll-to-header {
    scroll-margin-top: 6rem;
  }
}
@media screen and (min-width: 900px) {
  .scroll-to-header {
    scroll-margin-top: 7rem;
  }
}
/* New mp3 player */
.clip-player {
  height: 1.75em;
  display: flex;
  cursor: pointer;
}
.clip-player > div {
  pointer-events: none;
}
.clip-player .clip-speaker, .clip-player .clip-play, .clip-player .clip-pause {
  display: inline-block;
  height: 100%;
  width: 1.75em;
  background-size: 0.9em;
  background-repeat: no-repeat;
  background-position: center;
}
.clip-player .clip-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  background-color: #700;
  transition: width 200ms ease-in-out;
  border-radius: 0.5em 0 0 0.5em;
}
.clip-player .clip-right {
  background-color: #700;
  border-radius: 0 0.5em 0.5em 0;
  border-left: 0.125em solid #000;
}
.clip-player .clip-speaker {
  background-image: url("../images/clip-player-speaker2.svg");
}
.clip-player .clip-time {
  display: none;
  font-weight: bold;
  font-size: 0.8em;
  color: #ccc;
}
.clip-player .clip-play {
  display: block;
  background-image: url("../images/clip-player-play2.svg");
}
.clip-player .clip-pause {
  display: none;
  background-image: url("../images/clip-player-pause2.svg");
}
.clip-player .clip-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 0;
  background-color: #700;
  transition: width 300ms ease-in-out;
}
.clip-player .clip-info .clip-title {
  font-size: 0.7em;
  width: 100%;
  color: #ccc;
  text-wrap: nowrap;
  overflow-x: hidden;
  margin: 0 0.375em;
}
.clip-player .clip-info .clip-progress {
  font-size: 0.7em;
  background-color: #ccc;
  height: 0.5em;
  width: var(--clip-progress-width);
  margin: 0 0.375em;
}

.clip-playing .clip-left {
  width: 2.5em;
}
.clip-playing .clip-right {
  border-left: 0;
}
.clip-playing .clip-speaker {
  display: none;
}
.clip-playing .clip-play {
  display: none;
}
.clip-playing .clip-info {
  width: 6.5em;
}
.clip-playing .clip-time {
  display: flex;
}
.clip-playing .clip-pause {
  display: block;
}

.multicol .clip-playing .clip-info {
  width: 5.75em;
}

@media screen and (max-width: 425px) {
  .multicol .clip-playing .clip-info {
    width: 5.5em;
  }
}
@media screen and (max-width: 392px) {
  .multicol .clip-playing .clip-info {
    width: 5em;
  }
}
@media screen and (max-width: 374px) {
  .multicol .clip-playing .clip-info {
    width: 4.5em;
  }
}
/* Page pieces */
.ebowshell {
  position: relative;
  width: 100%;
  max-width: 1650px;
  padding: 1.125em 1.25em;
  margin: 0 auto;
  border-radius: 0.5em;
  background-color: #000;
}

@media screen and (min-width: 500px) and (min-height: 500px) {
  .ebowshell {
    padding: 2.1875em;
  }
}
header {
  display: flex;
  position: sticky;
  width: 100%;
  height: 4em;
  top: 1em;
  background-color: #000;
  z-index: 100;
}
header:before {
  content: "";
  position: absolute;
  top: -1em;
  background-color: #000;
  height: 1em;
  width: 100%;
}
header .logo {
  position: absolute;
  top: 0;
  left: -0.25em;
  height: 70%;
  transition: opacity 200ms linear;
}
header .menu-controls {
  position: absolute;
  top: -1.25em;
  right: -1.25em;
  transition: opacity 200ms linear;
}
header .menu-controls > div {
  position: relative;
  font-size: 1.1em;
  padding: 0.75em 0.75em 0 0.75em;
  cursor: pointer;
}
header .menu-controls img, header .menu-controls svg {
  width: 1.5em;
  pointer-events: none;
}
@media (hover: hover) {
  header .menu-controls:hover img {
    filter: brightness(3000%) grayscale(100%);
  }
  header .menu-controls:hover div:before {
    color: #fff;
  }
}
header .menu-close-icon {
  display: none;
}
header .page-title {
  position: relative;
  width: fit-content;
  font-family: "Cooper Black", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #f00;
  -webkit-text-stroke: 0.025em #000;
  margin: 0 auto;
  padding: 0 1.35em 0 3.75em;
  text-align: center;
  transition: opacity 200ms linear;
}
header .page-title font font {
  font-family: "Ariel", sans-serif;
  font-weight: bold;
  -webkit-text-stroke: 0 #000;
}

.svg-icon {
  fill: #f00;
}

@media (hover: hover) {
  .svg-container:hover .svg-icon {
    fill: #fff;
  }
}
.scrolling .logo {
  opacity: 0.4;
  transition: opacity 350ms linear;
}
.scrolling .logo:hover {
  opacity: 1;
}
.scrolling .menu-controls {
  opacity: 0.4;
  transition: opacity 350ms linear;
}
.scrolling .menu-controls:hover {
  opacity: 1;
}
.scrolling .page-title {
  opacity: 0.4;
  transition: opacity 350ms linear;
}

.toc-open .menu-controls {
  z-index: 201;
  opacity: 1;
  transition: none;
}

@media (hover: none) {
  .scrolling .menu-controls, .scrolling .toc-link {
    opacity: 1;
  }
}
nav {
  display: block;
  position: absolute;
  top: -0.5em;
  right: 0;
  height: 0;
}

.nav-group {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  font-size: 1.75em;
  margin: 0;
  padding: 0 0 1.35em 0;
  background-size: 1.35em 1.35em;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 3.875em;
  text-align: center;
}
@media (hover: hover) {
  .nav-group:hover {
    filter: brightness(3000%) grayscale(100%);
  }
}

.nav-pages a {
  display: block;
  width: 100%;
  font-size: 1.125em;
  line-height: 1.125;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  padding: 0 0.75em;
}
.nav-pages a + a {
  padding-top: 0.5em;
}

.nav-container {
  display: none;
  flex-direction: column;
  gap: 1em;
  background-color: #222;
  max-width: 21.875em;
  position: absolute;
  right: 2.5em;
  padding: 0.9375em;
  border-radius: 0.9375em;
  box-shadow: 0 0 1.5em 0.25em #000;
  top: 0;
}
.nav-container .selected {
  color: #fff;
}
.nav-container > div {
  display: grid;
  grid-template-columns: 6em 1fr;
  align-items: center;
  border: 0.1em solid #aaa;
  border-radius: 0.625em;
  padding: 0.625em 0;
}
.nav-container .nav-home {
  display: flex;
  justify-content: center;
}
.nav-container .nav-home a {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  position: relative;
  font-size: 1.575em;
  background-size: 1.35em 1.35em;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: auto;
  padding: 0 1.5em 0 0;
  margin: 0;
  color: #f00;
  -webkit-text-stroke: 0.025em #f00;
}
.nav-container .nav-home a.selected {
  color: #fff;
  -webkit-text-stroke-color: #fff;
}
.nav-container .nav-home a.selected:after {
  content: url("../images/nav_home.svg");
}
.nav-container .nav-home a:after {
  content: url("../images/nav_home_red.svg");
  position: absolute;
  top: 0;
  right: 0;
  height: 1.125em;
  width: 1.125em;
}
@media (hover: hover) {
  .nav-container .nav-home a:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
  }
  .nav-container .nav-home a:hover:after {
    content: url("../images/nav_home.svg");
  }
}
.nav-container .nav-media .nav-group {
  background-image: url("../images/nav_media_red.svg");
}
@media (hover: hover) {
  .nav-container .nav-media .nav-group:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
    background-image: url("../images/nav_media.svg");
  }
}
.nav-container .nav-learn .nav-group {
  background-image: url("../images/nav_learn_red.svg");
}
@media (hover: hover) {
  .nav-container .nav-learn .nav-group:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
    background-image: url("../images/nav_learn.svg");
  }
}
.nav-container .nav-talk .nav-group {
  background-image: url("../images/nav_talk_red.svg");
}
@media (hover: hover) {
  .nav-container .nav-talk .nav-group:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
    background-image: url("../images/nav_talk.svg");
  }
}

.menu-open .menu-controls {
  z-index: 200;
  opacity: 1;
}
.menu-open .menu-open-icon {
  display: none;
}
.menu-open .menu-close-icon {
  display: block;
}
.menu-open nav {
  height: auto;
  z-index: 102;
  height: 100%;
}
.menu-open .nav-container {
  display: flex;
}

.show-all .section-head {
  position: static;
  top: 3.25em;
  z-index: 1;
}
.show-all .section-head span {
  display: none;
}
.show-all .section-head span + span {
  display: inline;
}

.featured-page .show-all .section-head, .applications-page .show-all .section-head, .quotes-page .show-all .section-head, .pictures-page .show-all .section-head {
  position: sticky;
}

@media screen and (min-width: 450px) {
  .show-all .section-head {
    top: 3.125em;
  }
}
@media screen and (min-width: 575px) {
  header .page-title {
    font-size: 2.25em;
    padding: 0 1.25em 0 3.25em;
  }
  .video-container {
    top: 3.5em;
  }
}
@media screen and (min-width: 650px) {
  header {
    height: 4em;
  }
  header .page-title {
    font-size: 2.5em;
    padding: 0 0.75em 0 3.25em;
  }
  .show-all .section-head {
    top: 3em;
  }
  .video-container {
    top: 4.25em;
  }
}
@media screen and (min-width: 750px) {
  header {
    height: 5em;
  }
  header .page-title {
    font-size: 2.75em;
    padding: 0 0.75em 0 3.75em;
  }
  .show-all .section-head {
    top: 3.5em;
  }
  .video-container {
    top: 5em;
  }
}
@media screen and (min-width: 800px) {
  header .page-title {
    padding: 0 1.75em 0 3.75em;
  }
}
@media screen and (min-width: 900px) {
  header {
    height: 6em;
  }
  header .page-title {
    padding: 0 1em 0 clamp(1em, 10vw, 4.5em);
  }
  .show-all .section-head {
    top: 3.8125em;
  }
  .video-container {
    top: 6em;
  }
}
@media screen and (min-width: 1200px) {
  .show-all .section-head {
    top: 3.6875em;
  }
}
@media screen and (min-aspect-ratio: 3/2) {
  .aspect-16-9 header {
    position: relative;
    top: 0;
  }
}
@media screen and (max-width: 450px) {
  nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
  .nav-container {
    position: relative;
    right: auto;
    margin-right: 2.5em;
    background-color: #000;
  }
  .nav-container div {
    background-color: #222;
  }
  .menu-open nav {
    bottom: 0;
    right: 0;
    overflow-y: scroll;
  }
  body:has(.menu-open) {
    overflow-y: hidden;
  }
}
@media screen and (max-height: 750px) and (orientation: landscape) {
  .nav-container {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: none;
    gap: 0.75em;
  }
  .nav-container > div {
    display: block;
  }
  .nav-container .nav-home {
    width: 100%;
    grid-column: 1/span 3;
    padding: 0.5em;
    justify-content: center;
  }
  .nav-container .nav-home .nav-group {
    padding: 0;
    text-align: center;
    line-height: 1.2;
    background-position: center top;
  }
  .menu-open .nav-container {
    display: grid;
  }
  .nav-group {
    padding: 0 0 0 1.25em;
    margin: 0 0 0.25em 0.5em;
    background-position: left center;
    background-size: 1em;
    text-align: left;
  }
  .nav-pages {
    width: fit-content;
    padding: 0.25em;
  }
}
section {
  width: 100%;
  margin-bottom: 0.875em;
  clear: both;
}
section:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
section div:has(.image-right) {
  width: 100%;
}

.continuation {
  margin-top: -0.5em;
}

.section-head {
  position: relative;
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  font-size: 1.375em;
  z-index: 1;
  background-color: #000;
  border-bottom: 0.1em solid #f30;
  margin: 0 0 0.75em 0;
  padding: 0.75em 0 0.2em 0;
  line-height: 1.1;
  text-align: left;
}
.section-head:has(span) {
  padding-right: 3.75em;
}
.section-head span {
  display: block;
  outline: 0;
  min-width: 2.5em;
  background-color: #500;
  color: #ddd;
  font-weight: normal;
  font-size: 0.9375em;
  letter-spacing: 0.025em;
  height: 1.85em;
  line-height: 1.15;
  padding: 0 0.9em;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.85);
  border-radius: 1.5625em;
  border: 0.06666667em solid #f00;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  display: inline;
  position: absolute;
  font-size: 0.675em;
  width: 6.25em;
  top: auto;
  bottom: 0.5em;
  right: 0;
  padding: 0.3125em 0.5em;
  font-family: "Arial", sans-serif;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  cursor: pointer;
}
.section-head span + span {
  display: none;
}
@media (hover: hover) {
  .section-head span:hover {
    background-color: #900;
  }
}
.section-head .sect-menu-icon {
  display: inline;
  position: absolute;
  font-size: 1.1em;
  top: 0.625em;
  right: -0.5em;
  width: 1.75em;
  padding: 0 0.5em;
  margin: 0 0 -0.25em 0;
  cursor: pointer;
}
.section-head .sect-menu-icon img {
  position: relative;
  width: 0.75em;
  top: 0.125em;
}
@media (hover: hover) {
  .section-head .sect-menu-icon:hover img {
    filter: brightness(3000%) grayscale(100%);
  }
}
.section-head .sect-menu-icon:has(+ span) {
  right: 3.5em;
}
.section-head .sect-menu-icon:has(+ span) img {
  position: relative;
  top: 0.0125em;
  height: auto;
}

@media screen and (min-width: 450px) {
  .section-head {
    font-size: 1.4375em;
  }
}
@media screen and (min-width: 600px) {
  .section-head {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 750px) {
  .section-head {
    font-size: 1.5625em;
  }
  .section-head .sect-menu-icon {
    font-size: 1.056em;
  }
  .section-head .sect-menu-icon:has(+ span) {
    right: 3.625em;
    top: 0.675em;
  }
}
@media screen and (min-width: 900px) {
  .section-head {
    font-size: 1.625em;
  }
  .section-head .sect-menu-icon {
    font-size: 1.015em;
  }
  .section-head .sect-menu-icon:has(+ span) {
    right: 3.875em;
  }
}
@media screen and (min-width: 1050px) {
  .section-head {
    font-size: 1.6875em;
  }
  .section-head .sect-menu-icon {
    font-size: 0.975em;
  }
  .section-head .sect-menu-icon:has(+ span) {
    right: 4em;
    top: 0.75em;
  }
}
@media screen and (min-width: 1200px) {
  .section-head {
    font-size: 1.75em;
  }
  .section-head .sect-menu-icon {
    font-size: 0.95em;
  }
  .section-head .sect-menu-icon:has(+ span) {
    top: 0.825em;
  }
  .section-head span {
    font-size: 0.6em;
  }
}
.tiled-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.75em;
  justify-content: space-between;
  margin: 0.9375em 0 1.25em 0;
}

.tile-element {
  width: 100%;
}
.tile-element img {
  border: 0.0625em #333 solid;
  width: 100%;
  aspect-ratio: 4/3;
}
.tile-element h2 {
  color: #ccc;
  font-size: 0.8125em;
  line-height: 1.3;
  margin: 0;
}
.tile-element p {
  font-size: 0.625em;
  line-height: 1.3;
  margin: 0;
}

.multicol {
  display: grid;
  grid-gap: 2em 2.5em;
}

@media screen and (min-width: 1250px) {
  .multicol {
    display: grid;
    grid-gap: 3em 3.5em;
  }
}
.cols-2 {
  grid-template-columns: 1fr;
}

.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.cols-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.cols-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media screen and (min-width: 530px) {
  .tiled-content {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.875em;
  }
  .cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 700px) {
  .tiled-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1em;
  }
}
@media screen and (min-width: 900px) {
  .tiled-content {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1.125em;
  }
}
@media screen and (max-width: 600px) {
  .cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 850px) {
  .cols-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 650px) {
  .cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1075px) {
  .tiled-content {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1.25em;
  }
}
@media screen and (min-width: 1075px) {
  .has-tiles:not([data-has-7]) .section-head span {
    display: none;
  }
}
@media screen and (min-width: 900px) {
  .has-tiles:not([data-has-6]) .section-head span {
    display: none;
  }
}
@media screen and (min-width: 700px) {
  .has-tiles:not([data-has-5]) .section-head span {
    display: none;
  }
}
@media screen and (min-width: 530px) {
  .has-tiles:not([data-has-4]) .section-head span {
    display: none;
  }
}
.tiled-content > div:nth-child(n+7) {
  display: none;
}

@media screen and (max-width: 1074px) {
  .tiled-content > div:nth-child(n+6) {
    display: none;
  }
}
@media screen and (max-width: 899px) {
  .tiled-content > div:nth-child(n+5) {
    display: none;
  }
}
@media screen and (max-width: 699px) {
  .tiled-content > div:nth-child(n+4) {
    display: none;
  }
}
@media screen and (max-width: 529px) {
  .tiled-content > div:nth-child(n+3) {
    display: none;
  }
}
.row-content > div:nth-child(n+2) {
  display: none;
}

.has-rows:not([data-has-4]) .section-head span {
  display: none;
}

.ebowshell .show-all .tiled-content div, .ebowshell .show-all .row-content div {
  display: block;
}

.indent-para p {
  text-indent: 0.75em;
}

.intro {
  font-style: italic;
}

/* Code for popup windows */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 101;
  transition: background-color 100ms linear;
}

.overlay-show #overlay {
  background-color: rgba(0, 0, 0, 0.75);
  right: 0;
  bottom: 0;
}

.popup-link {
  cursor: pointer;
  color: #f00;
}
@media (hover: hover) {
  .popup-link:hover {
    color: #fff;
  }
}
.popup-link img, .popup-link a {
  pointer-events: none;
}

div.popup-link {
  transform: scale(1);
  transition: scale 300ms;
}
div.popup-link.active {
  transform: scale(1.1);
}

li.popup-link.active, li.popup-link.active a {
  color: #fff;
}

.popup-link[data-type=artist] {
  color: #f00;
  font-size: 0.95em;
  margin: 0 0 0.125em 0;
  line-height: 1.1;
  font-weight: normal;
}
@media (hover: hover) {
  .popup-link[data-type=artist]:hover {
    color: #fff;
  }
}

.green-artist .popup-link[data-type=artist] {
  color: #0f0;
}

@keyframes loader-delay {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
}
#ebow-popup.popup-closed {
  display: none;
}

#ebow-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: #500;
  box-shadow: 0 0 1.5em 0.25em #000;
  border-radius: 0.3125em;
  border: 0.0625em solid #555;
  padding: 2em 0.625em 0.375em 0.625em;
  user-select: none;
}
#ebow-popup iframe {
  border: 0;
  background-color: #000;
}
#ebow-popup.faq-popup iframe {
  background-color: #500;
}
#ebow-popup .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0;
  animation: loader-delay 100s;
}
#ebow-popup .loader img {
  width: 50%;
  display: block;
}
#ebow-popup .popup-title {
  position: absolute;
  top: -2.1875em;
  left: 0;
  width: 100%;
  line-height: 1.4;
}
#ebow-popup .popup-title h1 {
  font-size: 1em;
  text-align: center;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffe75f;
}
#ebow-popup .popup-title h1 em {
  color: #f00;
  font-style: normal;
  margin-left: 0.5em;
}

#popup-content {
  position: relative;
}
#popup-content button {
  margin-bottom: 1em;
  background-color: #700;
}
#popup-content button:hover {
  background-color: #a00;
}

.youtube-popup #popup-content {
  background-color: #000;
  aspect-ratio: 16/9;
  width: 90vw;
}
.youtube-popup iframe {
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  transform: scale(0.66666, 0.66666);
  bottom: 0;
  right: 0;
}

@media screen and (min-width: 1225px) {
  .youtube-popup #popup-content {
    width: 68.75em;
  }
}
@media (min-aspect-ratio: 16/10) and (max-height: 700px) {
  .youtube-popup #popup-content {
    width: 150vmin;
  }
}
@media (min-aspect-ratio: 16/10) and (max-height: 500px) {
  .youtube-popup #popup-content {
    width: 140vmin;
  }
}
@media (min-aspect-ratio: 16/10) and (max-height: 350px) {
  .youtube-popup #popup-content {
    width: 130vmin;
  }
}
@media screen and (min-width: 650px) {
  .youtube-popup iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(1, 1);
  }
}
.mp4-popup #popup-content {
  background-color: #000;
  aspect-ratio: 4/3;
  width: 100%;
}
.mp4-popup video {
  width: 100%;
}

.picture-popup {
  background-color: #333;
}
.picture-popup #popup-content img {
  width: 100%;
}

.popup-scroll {
  width: 100%;
  height: 85vh;
  max-height: 37.5em;
  overflow-y: auto;
  background-color: #500;
  padding: 0.75em;
}
.popup-scroll ul {
  padding: 0;
  margin-top: 0;
}

@media screen and (orientation: landscape) {
  .popup-scroll {
    height: 75vh;
  }
}
.artist-popup, .faq-popup, .artist-popup #popup-content, .faq-popup #popup-content {
  width: 100%;
  max-width: 95vw;
  max-height: 95vh;
}

@media screen and (min-width: 835px) {
  .artist-popup, .faq-popup, .artist-popup #popup-content, .faq-popup #popup-content {
    max-width: 50em;
  }
}
.faq-popup h1 {
  margin-bottom: 0;
}
.faq-popup p {
  color: #fff;
}
.faq-popup .loader {
  width: 100%;
  display: flex;
  height: 85vh;
  max-height: 37.5em;
  overflow-y: scroll;
  background-color: #500;
}
.faq-popup .loader img {
  opacity: 0;
  transition: opacity 500ms linear 500ms;
}
.faq-popup .popup-scroll > img {
  width: 100%;
  margin: 0 0 1em 0;
}

@media screen and (min-width: 600px) {
  .faq-popup .popup-scroll > img {
    float: right;
    margin: 0 0 0.625em 0.625em;
    width: 50%;
  }
}
.popup-footer {
  container-type: inline-size;
  container-name: popupFooter;
  position: relative;
  height: 1.375em;
  font-weight: bold;
  line-height: 1;
}

.popup-tally {
  display: block;
  position: absolute;
  left: 0;
  top: 0.375em;
  color: #aaa;
  font-size: 1em;
}

.popup-nav {
  position: absolute;
  right: 0;
  display: flex;
  justify-content: space-between;
  width: auto;
  font-size: 1.125em;
}
.popup-nav .disabled {
  color: #888;
  cursor: default;
}
.popup-nav .disabled:hover {
  color: #888;
}
.popup-nav .disabled:before {
  opacity: 0.4;
}
.popup-nav span:before {
  content: url("../images/nav_media.svg");
  position: absolute;
  height: 0.85em;
  width: 0.85em;
}

.popup-prev, .popup-next {
  position: relative;
  color: #f00;
  cursor: pointer;
}
.popup-prev:after, .popup-next:after {
  display: none;
}
@media (hover: hover) {
  .popup-prev:hover, .popup-next:hover {
    color: #fff;
  }
}

.popup-prev {
  padding: 0.25em 0.75em 1.25em 1.75em;
}
.popup-prev:before {
  top: 0.375em;
  left: 0.5em;
  transform: rotate(180deg);
}
.popup-prev:after {
  display: inline;
  content: "Prev";
}

.popup-next {
  padding: 0.25em 1.75em 1.25em 0.75em;
  margin-right: 0.5em;
}
.popup-next:before {
  top: 0.275em;
  right: 0.5em;
}
.popup-next:after {
  display: inline;
  content: "Next";
}

.popup-close {
  cursor: pointer;
  width: 2em;
  height: 2em;
  padding: 0.575em;
  margin: -0.2em -0.75em 0 0;
  opacity: 0.8;
}
.popup-close:hover {
  opacity: 1;
}

@media screen and (min-width: 550px) {
  #ebow-popup {
    padding: 2em 0.75em 0.5em 0.75em;
  }
  #ebow-popup .popup-title {
    top: -2.3125em;
  }
  #ebow-popup .popup-title h1 {
    font-size: 1.125em;
  }
  #ebow-popup .popup-title h1 em {
    margin-left: 0.5em;
  }
  #ebow-popup.faq-popup .popup-title h1 {
    font-size: 1.25em;
  }
  .popup-footer {
    height: 1.5em;
  }
  .popup-tally {
    top: 0.5em;
  }
  .popup-footer .popup-nav {
    font-size: 1.25em;
  }
  .popup-prev {
    padding: 0.325em 0.75em 1.325em 1.75em;
  }
  .popup-prev:before {
    top: 0.425em;
  }
  .popup-next {
    padding: 0.325em 1.75em 1.325em 0.75em;
    margin-right: 1em;
  }
  .popup-next:before {
    top: 0.325em;
  }
  .popup-scroll {
    padding: 1.25em;
  }
}
@container popupFooter (max-width: 270px) {
  .popup-nav span:before {
    display: none;
  }
  .popup-next {
    padding-right: 0.25em;
  }
  .popup-prev {
    padding-left: 0.25em;
  }
}
@container popupFooter (max-width: 350px) {
  .popup-nav {
    right: auto;
    width: 100%;
  }
  .popup-tally {
    display: none !important;
  }
}
.note {
  margin-top: 1.875em;
}
.note p {
  margin: 0;
  font-weight: bold;
  font-style: italic;
}

.copyright {
  font-size: 0.8125em;
  color: #555;
  text-align: center;
  margin: 1.75em 0 0 0;
}

/* For pages with a table of contents */
.popup-displayed .contents-controls {
  z-index: 0;
}

.toc-open .contents-controls {
  z-index: 201;
}
.toc-open .toc {
  display: block;
}

.toc {
  display: none;
  position: absolute;
  top: -0.5em;
  right: 3.25em;
  width: fit-content;
  z-index: 200;
  overflow-x: auto;
  background-color: #222;
  border-radius: 1em;
  padding: 1em 1.5em 1em 1.5em;
  box-shadow: 0 0 1.5em 0.25em #000;
}
.toc h1 {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  font-size: 1.5em;
  text-align: center;
  margin-top: 0;
}
.toc h2 {
  margin-top: 0;
}

.contents-controls {
  position: absolute;
  right: -1.1875em;
  top: 2em;
  z-index: 200;
}

.contents-close-toc {
  display: none;
  position: absolute;
  top: -0.5625em;
  right: -0.0625em;
  font-size: 1.1em;
  padding: 0.75em;
  cursor: pointer;
  z-index: 201;
}
.contents-close-toc img, .contents-close-toc svg {
  width: 1.5em;
}

@media (hover: hover) {
  .contents-controls:hover .toc-link {
    opacity: 1;
  }
  .contents-controls:hover img {
    filter: brightness(3000%) grayscale(100%);
  }
}
.toc-link {
  display: block;
  position: sticky;
  z-index: 101;
  font-size: 1.1em;
  top: 2.75em;
  padding: 0 0.75em 0.5em 0.75em;
  width: fit-content;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.001;
  }
}
@keyframes jumpUp {
  100% {
    top: -5em;
  }
}
.scrolling .toc-link {
  opacity: 0.4;
  transition: opacity 350ms linear;
}
.scrolling .toc-link .toc-label:before {
  animation: fadeOut 500ms ease-in 300ms forwards;
}

.recordings-page .toc-label:before {
  content: "Index";
  width: 2em;
  animation: none;
}

.pg-page .toc-label:before {
  content: "Contents";
  width: 3.5em;
  animation: none;
}

.scrolling.recordings-page .toc-link, .scrolling.pg-page .toc-link {
  opacity: 1;
}
.scrolling.recordings-page .toc-link .toc-label:before, .scrolling.pg-page .toc-link .toc-label:before {
  animation: none;
}

.menu-open .toc-link, .toc-open .toc-link {
  opacity: 1;
}
.menu-open .toc-link .toc-label:before, .toc-open .toc-link .toc-label:before {
  display: none;
}

.toc-label {
  color: #f00;
  line-height: 1;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 0 0 0 0.5em;
  width: fit-content;
  padding: 0 0.75em 0.25em 0.5em;
  margin: 0.25em -0.675em 0 0;
  cursor: pointer;
}
.toc-label img, .toc-label svg {
  width: 1.25em;
  pointer-events: none;
}
.toc-label:before {
  content: "Page";
  position: absolute;
  font-size: 0.9em;
  top: 0;
  right: 3.25em;
  margin-top: 0.25em;
  width: 1.875em;
  color: #f00;
}

.toc-open .toc-label {
  visibility: hidden;
}

.toc-contents {
  width: fit-content;
  white-space: nowrap;
  margin: 0 auto;
  column-count: 1;
}
.toc-contents ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 0.5em;
  break-inside: avoid-column;
}
.toc-contents li + li {
  padding-top: 0.25em;
}
.toc-contents li a {
  display: block;
  width: 100%;
  font-size: 1.125em;
  font-weight: normal;
  white-space: nowrap;
}
.toc-contents h2 {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  font-size: 1.375em;
  padding: 0;
  margin: 0 0 0.125em 0;
}

.toc-list + .toc-list {
  margin-top: 1em;
}

/* Page-specific items */
.faq-page main ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.faq-page main li {
  font-size: 1.125em;
  line-height: 1.66em;
  padding: 0.1875em 0 0.75em 0.1875em;
  color: #f00;
  cursor: pointer;
}
@media (hover: hover) {
  .faq-page main li:hover {
    color: #fff;
  }
}
.faq-page main a {
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .faq-page main ul {
    padding-left: 2.5em;
  }
  .faq-page main li {
    padding: 0.1875em 0;
  }
}
.quotes-page main div + div {
  margin-top: 2em;
}
.quotes-page .quoted-artist {
  margin: 0 0 0.625em 0;
}
.quotes-page .quoted-artist span {
  font-size: 1em;
}

.one-third-media section img {
  width: 100%;
}
.one-third-media section div {
  clear: both;
  width: 100%;
}

@media screen and (min-width: 500px) {
  .one-third-media section > div img {
    max-width: 33%;
  }
}
.letter-nav {
  display: none;
}

.toc-open #toc:has(> .letter-nav) {
  width: 100vw;
}
.toc-open .letter-nav {
  position: absolute;
  top: -0.375em;
  right: 2.55em;
  font-size: 1.175em;
  display: flex;
  gap: 0em;
  flex-wrap: wrap;
  background-color: #222;
  padding: 0.5em;
  border-radius: 0.5em;
  width: fit-content;
  max-width: 14.5em;
  box-shadow: 0 0 1.5em 0.25em #000;
}
.toc-open .letter-nav a {
  color: #b00;
  font-weight: bold;
  font-size: 1.1em;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
}
@media (hover: hover) {
  .toc-open .letter-nav a:hover {
    color: #f00;
  }
}
@media screen and (min-width: 435px) {
  .toc-open .letter-nav:not(:has(:nth-child(25))) {
    max-width: 21em;
  }
}
@media screen and (min-width: 855px) {
  .toc-open .letter-nav:not(:has(:nth-child(25))) {
    max-width: none;
  }
}
.toc-open .letter-nav:has(> :nth-child(25)) {
  max-width: 16em;
}
@media screen and (min-width: 470px) {
  .toc-open .letter-nav:has(> :nth-child(25)) {
    max-width: 22.75em;
  }
}
@media screen and (min-width: 920px) {
  .toc-open .letter-nav:has(> :nth-child(25)) {
    max-width: none;
  }
}

.letter-div h2 {
  display: inline;
  font-size: 1.5em;
  margin: 0 0.5em;
  color: #ffe75f;
  font-weight: normal;
}
.letter-div .artist-index {
  font-size: 0.9em;
  color: #c00;
  padding: 0.5em;
  cursor: pointer;
}
@media (hover: hover) {
  .letter-div .artist-index:hover {
    color: #fff;
  }
}

.recordings-page main > div {
  font-size: 1.175em;
  width: 100%;
}
.recordings-page main > div + div {
  margin-top: 0.5em;
}
.recordings-page main img {
  width: 50%;
  max-width: 21em;
}
.recordings-page main section p {
  font-size: 1em;
  color: #ffe75f;
}
.recordings-page main section p em {
  color: #f00;
}
.recordings-page main .artist-entry {
  text-indent: -1.5em;
  padding-left: 1.5em;
  color: #b8b8b8;
}
.recordings-page main .artist-entry span {
  color: #b8b8b8;
}
.recordings-page main .artist-entry span:first-child {
  display: block;
  width: fit-content;
  color: #f00;
}
.recordings-page main .artist-entry span:not(:first-child, :last-child) {
  padding-right: 0.375em;
}
.recordings-page main .artist-entry span:not(:first-child, :last-child):after {
  content: "•";
  display: inline-block;
  width: 0.875em;
  font-size: 0.9em;
  color: #b8b8b8;
  text-align: right;
}
@media (hover: hover) {
  .recordings-page main .artist-entry span:hover {
    color: #fff;
  }
}
.recordings-page main .artist-entry span.mp3-playing {
  color: #fff;
}
.recordings-page main [data-type=youtube] {
  padding-left: 2.3125em;
  display: inline-block;
  text-indent: -0.75em;
  font-weight: normal;
  cursor: pointer;
  background: url("../images/icon-video4.png") no-repeat 0.0625em 0.25em;
  background-size: 1.125em auto;
}
@media (hover: hover) {
  .recordings-page main [data-type=youtube]:hover {
    background-image: url("../images/icon-video-bright.png");
    color: #fff;
  }
}
.recordings-page main .inline-mp3 {
  font-size: 1em;
}

@media screen and (max-width: 500px) {
  .recordings-page main .image-right {
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.5em 0;
    float: none;
  }
  .recordings-page main .artist-entry {
    text-indent: -1.5em;
    padding-left: 1.5em;
  }
  .recordings-page main section img {
    width: 100%;
    max-width: unset;
  }
}
.top-link {
  display: none;
  position: fixed;
  top: 90vh;
  right: 1.25em;
  width: 3.125em;
  height: 3.125em;
  border-radius: 3.125em;
  cursor: pointer;
  z-index: 999;
}
@media (hover: hover) {
  .top-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.top-link:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 1.125em solid transparent;
  border-right: 1.125em solid transparent;
  border-bottom: 1.125em solid #700;
  position: absolute;
  top: 0.75em;
  left: 0.4375em;
}

.comments-page form {
  max-width: 21.25em;
  margin: 0 auto;
  width: fit-content;
}
.comments-page form div {
  margin-bottom: 1em;
}
.comments-page form label {
  font-weight: bold;
  font-size: 1em;
  display: block;
  margin-bottom: 0.1875em;
}

@media screen and (max-width: 1200px) {
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  #animation_container {
    aspect-ratio: 15/10;
  }
  #animation_container, #animation_container canvas {
    margin: 0 auto;
    max-width: 100% !important;
    height: 100% !important;
    max-height: max-content !important;
  }
}
@media screen and (max-width: 480px) {
  td.controlsBar {
    display: none;
  }
  input:valid, textarea:valid {
    position: relative;
    display: inline-block;
    width: 100%;
  }
}
/* Homepage animation CSS */
#canvas {
  width: 100%;
  aspect-ratio: 3/1.962;
}

#currentElement {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 0.9375em;
}
#currentElement .fl-close {
  display: none;
  cursor: pointer;
}
#currentElement h2 {
  color: #ffe75f;
  font-family: "Handlee", sans-serif;
  font-size: 1.23em;
  text-align: center;
}
#currentElement.popup {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  top: 0;
  bottom: -1em;
  left: 0;
  right: 0;
}
#currentElement.popup h2 {
  display: none;
}
#currentElement.popup #animation_container {
  margin-left: 0;
}
#currentElement.popup .fl-close {
  position: absolute;
  top: 0;
  right: -0.625em;
  display: inline-block;
  font-size: 3.125em;
  line-height: 1;
}

@media screen and (min-height: 650px) {
  #currentElement.popup .fl-buttons {
    margin-top: 1em;
  }
}
#animation_container {
  position: relative;
  background-color: #000;
  width: 100%;
  margin-bottom: 2em;
}

#_preload_div_ {
  position: absolute;
  opacity: 0;
  animation: loader-delay 100s;
}

.fl-buttons {
  display: flex;
  width: 100%;
  justify-content: space-between;
  opacity: 1;
}
.fl-buttons .svg-container {
  display: none;
}
.fl-buttons button {
  padding: 0 0.6em;
  color: #eee;
}
@media (hover: hover) {
  .fl-buttons button:hover {
    color: #eee;
  }
  .fl-buttons button.active:hover {
    color: #eee;
  }
}
.fl-buttons .active {
  color: #eee;
  background-color: #b00;
}
.fl-buttons.disabled {
  pointer-events: none;
  opacity: 0;
}

@media screen and (min-width: 450px) {
  .fl-buttons {
    justify-content: center;
    gap: 0.75em;
  }
}
#dom_overlay_container {
  width: 30em;
  height: 18.75em;
  display: flex;
  align-items: center;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.popup #animation_container, .popup .popup #animation_container canvas {
  max-width: 37.5em;
  max-height: 25em;
}
.popup .fl-buttons .svg-container {
  display: none;
}

@media screen and (min-width: 400px) {
  .fl-buttons button {
    padding: 0 0.9em;
  }
}
@media screen and (min-width: 480px) {
  #animation_container, #animation_container canvas {
    max-width: 28.125em;
    max-height: 18.75em;
  }
}
@media screen and (min-width: 767px) {
  #currentElement {
    float: right;
  }
  .fl-buttons .svg-container {
    display: block;
  }
  .fl-buttons .svg-container .svg-icon {
    fill: #ccc;
  }
  .fl-buttons .svg-container:hover .svg-icon {
    fill: #fff;
  }
  .fl-buttons .svg-container svg {
    width: 1.5em;
    padding: 0.125em;
    cursor: pointer;
  }
  #animation_container {
    margin-left: 1em;
    width: 28.125em;
    min-height: 18.75em;
  }
}
.home-page #media p, .home-page #talk p, .home-page #learn p {
  text-align: center;
}
.home-page #media a, .home-page #talk a, .home-page #learn a {
  display: block;
}
.home-page section a, .home-page section .popup-link {
  font-size: 1.1em;
}
.home-page section .image-large {
  max-width: 50%;
}
.home-page section .image-medium {
  width: 100%;
}
.home-page .show-all .section-head {
  top: 2.75em;
}
.home-page h1 {
  font-size: 1.625em;
}
.home-page #media h1 {
  background-size: 1.2em 1.2em;
  background-repeat: no-repeat;
  background-position: left 0.5625em;
  padding: 0.75em 0 0.2em 1.375em;
  margin-top: 1em;
  background-image: url("../images/nav_media_yellow.svg");
}
.home-page #learn h1 {
  background-size: 1.2em 1.2em;
  background-repeat: no-repeat;
  background-position: left 0.5625em;
  padding: 0.75em 0 0.2em 1.375em;
  margin-top: 1em;
  background-image: url("../images/nav_learn_yellow.svg");
}
.home-page #talk h1 {
  background-size: 1.2em 1.2em;
  background-repeat: no-repeat;
  background-position: left 0.5625em;
  padding: 0.75em 0 0.2em 1.375em;
  margin-top: 1em;
  background-image: url("../images/nav_talk_yellow.svg");
}
.home-page .clip-player {
  margin: 1em 0 1.5em 0;
}
.home-page .clip-player:before {
  content: "EBow Demo:";
  margin: 0.125em 0.5em 0 0;
  color: #ddd;
}

#quick-links {
  text-align: center;
}

@media screen and (max-width: 850px) {
  #quick-links .cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 415px) {
  .home-page h1 {
    font-size: 1.75em;
  }
  .home-page .show-all .section-head {
    top: 2.16071429em;
  }
}
@media screen and (min-width: 600px) {
  .home-page section[id$=-section] h1 {
    font-size: 1.8125em;
  }
}
@media screen and (min-width: 750px) {
  .home-page section[id$=-section] h1 {
    font-size: 1.875em;
  }
  .home-page .show-all .section-head {
    top: 2.875em;
  }
}
@media screen and (min-width: 900px) {
  .home-page section[id$=-section] h1 {
    font-size: 1.9375em;
  }
}
@media screen and (min-width: 1050px) {
  .home-page section[id$=-section] h1 {
    font-size: 2em;
  }
}
@media screen and (min-width: 1200px) {
  .home-page section[id$=-section] h1 {
    font-size: 2.0625em;
  }
}
@media screen and (max-width: 500px) {
  .home-page section .image-large {
    float: none;
    margin: 0 0 0.625em 0;
    max-width: unset;
    width: 100%;
  }
}
.learn-overview-page section img, .history-page section img {
  width: 28em;
  max-width: 50%;
}

@media screen and (max-width: 525px) {
  .learn-overview-page section .image-large, .history-page section .image-large {
    float: none;
    margin: 0 0 0.625em 0;
    max-width: unset;
    width: 100%;
  }
}
.artist-popup #popup-content {
  line-height: 1.4;
}

.artist-popup h2 {
  color: #ffe75f;
  font-size: 1.1em;
}

.artist-popup p, .artist-popup li {
  color: #fff;
}

.artist-popup h2 {
  margin-bottom: 0.125em;
}

.artist-pic img {
  width: 100%;
  border-radius: 0.5em;
}

.artist-pic p {
  text-align: center;
  font-size: 0.75em;
}

.artist-pic {
  width: 100%;
  margin: 0 0 0.75em 0;
}

.athumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.athumbs > div {
  width: 100%;
}
.athumbs > div img {
  width: 100%;
}
.athumbs h2 {
  font-size: 0.75em;
  margin: 0;
  line-height: 1.3;
  color: #f00;
}
@media (hover: hover) {
  .athumbs h2:hover {
    color: #fff;
  }
}

@media screen and (min-width: 525px) {
  .artist-narrow {
    width: 45%;
    float: right;
    margin: 0 0 0.5em 0.625em;
  }
  .athumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .athumbs > div {
    width: 100%;
    max-width: 25%;
    min-width: 12.5em;
  }
  .athumbs:has(div:nth-child(2)) {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 600px) {
  .artist-narrow {
    width: 50%;
  }
  .athumbs > div {
    max-width: 30%;
    min-width: 14.25em;
  }
}
@media screen and (min-width: 750px) {
  .artist-pic {
    float: right;
    margin: 0 0 1em 0.625em;
    width: 60%;
  }
}
ebow-viewer {
  position: fixed;
  top: -3em;
  left: -3em;
  bottom: -3em;
  right: -3em;
  width: auto;
  height: auto;
  overflow: hidden;
  z-index: 1000;
  user-select: none;
}

.loader3d {
  position: fixed;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

p:has(#launch-3d) {
  width: fit-content;
  font-size: 1.375em;
  padding: 0.375em 0.75em 0.75em 0.75em;
  margin: 0 auto;
  border: 0.0625em solid #f00;
  border-radius: 1em;
  line-height: 1.2;
  background-color: #202020;
  background-image: url("../images/3d-rotation-icon.png");
  padding-right: 4em;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 80%;
}
p:has(#launch-3d) button {
  font-size: 0.8em;
  margin-top: 0.375em;
}

.close3d {
  position: fixed;
  z-index: 1001;
  top: 1em;
  right: 1em;
  width: 2.5em;
  height: 2.5em;
  padding: 0.5em;
  border: 0;
  background-color: #600;
  border-radius: 2em;
  cursor: pointer;
}
@media (hover: hover) {
  .close3d:hover {
    background-color: #900;
  }
}

.model-buttons {
  position: fixed;
  top: 1.25em;
  right: 4.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background-color: #151515;
  border: 0.0625em solid #b00;
  border-radius: 1em;
  padding: 0.5em 0;
  max-width: 13.5em;
  z-index: 1001;
}
.model-buttons button {
  padding: 0 0.4em;
  background: transparent;
  color: #c00;
  border: none;
}
.model-buttons button:nth-child(n+4) {
  font-size: 0.825em;
  font-style: italic;
}
.model-buttons button.option-sel {
  background: transparent;
  color: #888;
}
@media (hover: hover) {
  .model-buttons button:hover {
    color: #ddd;
    background-color: #900;
  }
}
.model-buttons .selected {
  background: transparent;
  color: #fff;
}

@media screen and (min-width: 750px) {
  .close3d {
    top: 1.5em;
    right: 1.5em;
    width: 2.5em;
    height: 2.5em;
  }
  .model-buttons {
    top: 1.75em;
    right: 5em;
  }
}
@media screen and (min-width: 1000px) {
  .close3d {
    top: 2em;
    right: 2em;
    width: 2.5em;
    height: 2.5em;
  }
  .model-buttons {
    top: 2.25em;
    right: 5.5em;
  }
}
@media screen and (max-height: 750px) and (orientation: landscape) {
  .model-buttons {
    display: block;
    top: 4.55em;
    right: 1.5em;
    padding: 0.5em;
  }
  .model-buttons button {
    width: 100%;
  }
  .model-buttons button:nth-child(4) {
    position: relative;
    margin-top: 1.25em;
  }
  .model-buttons button:nth-child(4):nth-child(4):before {
    content: "";
    position: absolute;
    top: -0.75em;
    height: 0.125em;
    width: 75%;
    background-color: #900;
  }
  .close3d {
    top: 1.0625em;
  }
}
@media screen and (min-width: 700px) and (min-height: 450px) {
  .popup #animation_container {
    transform: scale(1.1);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.9090909091);
  }
}
@media screen and (min-width: 800px) and (min-height: 525px) {
  .popup #animation_container {
    transform: scale(1.2);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.8333333333);
  }
}
@media screen and (min-width: 900px) and (min-height: 600px) {
  .popup #animation_container {
    transform: scale(1.3);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.7692307692);
  }
}
@media screen and (min-width: 1000px) and (min-height: 725px) {
  .popup #animation_container {
    transform: scale(1.4);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.7142857143);
  }
}
@media screen and (min-width: 1100px) and (min-height: 800px) {
  .popup #animation_container {
    transform: scale(1.6);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.625);
  }
}
@media screen and (min-width: 1200px) and (min-height: 850px) {
  .popup #animation_container {
    transform: scale(1.75);
  }
  .popup #animation_container .fl-buttons {
    transform: scale(0.5714285714);
  }
}
/* Code for the pages with a video section */
.video-title {
  position: relative;
  line-height: 1.1;
  padding: 0 0.5em 0.5em 0.5em;
  margin: 0 auto -1em auto;
  text-align: center;
  z-index: 15;
}
.video-title h2 {
  font-size: 1.25em;
  margin: 0;
}
.video-title span {
  font-size: 1em;
  color: #f00;
}

@media screen and (min-width: 550px) {
  .video-title h2 {
    font-size: 1.375em;
  }
}
.video-section {
  display: block;
  position: relative;
  padding-top: 0;
  margin-top: -1em;
}
.video-section video {
  width: 100%;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.video-section .mp4-container {
  position: relative;
  border: 0.0625em solid #6a6a6a;
  border-bottom: 0;
}
.video-section.animated-lessons video {
  aspect-ratio: 16/9;
}

.video-wrapper {
  position: relative;
}

.video-container {
  background-color: #000;
  line-height: 0;
  position: sticky;
  top: 3.75em;
  z-index: 10;
  padding: 0.125em 0 0 0;
  margin-bottom: 1em;
}
.video-container:before {
  content: "";
  background-color: #000;
  width: 100%;
  height: 1.2em;
  display: block;
}
.video-container:after {
  content: "";
  position: absolute;
  bottom: -1.5em;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  height: 1.5em;
  width: 100%;
}
.video-container .loader {
  display: none;
  width: 100%;
  border: 0.0625em solid #6a6a6a;
  border-bottom: 0;
  aspect-ratio: 4/3;
}

@media screen and (min-width: 750px) {
  .video-container {
    top: 5em;
  }
}
.video-annotation {
  position: absolute;
  bottom: 2.1875em;
  left: 0;
  right: 0;
  z-index: 21;
  width: fit-content;
  border-radius: 0.35em 0.35em 0 0;
  border: 0.0625em solid #6a6a6a;
  border-bottom: 0;
  margin: 0 auto;
  line-height: 1.1;
  text-align: center;
  background-color: #000;
}

.video-annotation span {
  display: block;
  color: #ddd;
  font-size: 0.9em;
  padding: 0.25em 0.5em 0.0625em 0.5em;
}

.video-annotation:empty {
  display: none;
}

@media screen and (min-width: 550px) {
  .video-annotation span {
    font-size: 1.125em;
  }
}
.video-poster {
  position: absolute;
  top: 1.35em;
  left: 0;
  bottom: 1em;
  right: 0;
  width: 100%;
  z-index: 22;
  border: 0.0625em solid #6a6a6a;
  cursor: pointer;
}

.video-controls {
  z-index: 20;
  position: relative;
  display: grid;
  grid-template-columns: 2em 2em 1fr 2em;
  align-items: center;
  gap: 1em;
  padding: 0.35em;
  height: 2.1875em;
  background-color: #000;
  border: 0.0625em solid #6a6a6a;
}
.video-controls img {
  height: 1.25em;
  cursor: pointer;
}
.video-controls > div {
  width: fit-content;
}
.video-controls > div:nth-child(n+3) {
  justify-self: end;
}
.video-controls .next-prev span {
  position: relative;
  font-size: 1.1em;
  padding: 0 1.25em;
  font-weight: bold;
  color: #f00;
  cursor: pointer;
  user-select: none;
}
.video-controls .next-prev span:before {
  content: url("../images/nav_media.svg");
  position: absolute;
  height: 1em;
  width: 1em;
}
@media (hover: hover) {
  .video-controls .next-prev span:hover {
    color: #fff;
  }
}
.video-controls .next-prev span + span {
  margin-left: 1em;
}
.video-controls .next-prev .prev {
  padding: 0 0 0 1.375em;
}
.video-controls .next-prev .prev:before {
  top: 0.2em;
  left: 0;
  transform: rotate(180deg);
}
.video-controls .next-prev .next {
  padding: 0 1.375em 0 0;
}
.video-controls .next-prev .next:before {
  top: 0.0625em;
  right: 0;
}
.video-controls .next-prev .disabled {
  color: #888;
  cursor: default;
}
.video-controls .next-prev .disabled:before {
  opacity: 0.4;
}
.video-controls .next-prev .disabled:hover {
  color: #888;
}

#pause-icon, #mute-icon, #exit-fullscreen {
  display: none;
}

.video-progress {
  position: relative;
  top: -0.125em;
  left: 0.0625em;
  width: 0;
  height: 0.1875em;
  margin-top: -0.125em;
  background-color: #900;
  z-index: 20;
}

.hide-scrubber.video-progress {
  transition: width 400ms;
}

.video-scrubber {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  background-color: #f00;
  bottom: 50%;
  right: 0;
  border-radius: 1em;
  transform: translate(50%, 50%);
  cursor: pointer;
  transition: width 150ms, height 150ms;
  cursor: ew-resize;
}

.hide-scrubber .video-scrubber {
  width: 0;
  height: 0;
}

/* Code for pages with split-page class (includes Player's Guide) */
.text-wrapper + .text-wrapper {
  margin-top: 0.5em;
}

.split-video-wrapper {
  min-height: 16em;
  background-color: #1b1b1b;
  border: 0.0625em solid #707070;
  border-radius: 0.9375em 0.9375em 0 0;
}
.split-video-wrapper:not(:has(.split-video-title)) video {
  border-top: none;
  border-radius: 0.9375em 0.9375em 0 0;
}
.split-video-wrapper video {
  width: 100%;
  border-top: 0.0625em solid #6a6a6a;
  border-bottom: 0.0625em solid #6a6a6a;
}

.split-video-container .video-controls {
  background-color: transparent;
  border: 0;
  grid-template-columns: 2em 1fr 2em;
  padding: 0.025em 0.375em 0.375em 0.375em;
  height: 1.75em;
}
.split-video-container .video-controls img {
  height: 1.375em;
}
.split-video-container .enter-fullscreen {
  visibility: visible;
}
.split-video-container .pause-icon, .split-video-container .mute-icon, .split-video-container .exit-fullscreen {
  display: none;
}
.split-video-container .video-progress {
  top: 0;
  left: 0;
}

.split-video-title {
  font-size: 1.125em;
  margin: 0.125em 0;
  text-align: center;
  font-weight: 700;
}
.split-video-title + video {
  border-radius: 0 0 0.9375em 0.9375em;
}

.image-wrapper {
  max-width: 100%;
  min-height: 10em;
  margin-bottom: 0.5625em;
  border-radius: 0.9375em;
  line-height: 0;
  background-color: #500;
}
.image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 0.9375em;
}

.audio-wrapper {
  display: flex;
  align-items: center;
  margin: 0.5em;
}
.audio-wrapper p {
  font-size: 1.125em;
  font-weight: 400;
  line-height: 1.5em;
  margin-right: 0.875em;
}

.split-section + .split-section {
  margin-top: 1em;
}

.text-content {
  width: 100%;
}

.media-content {
  margin-top: 1em;
  width: 100%;
}
.media-content > div + div {
  margin-top: 1em;
}

.no-media .text-content {
  width: 100%;
}

@media only screen and (min-width: 675px) {
  .split-content {
    display: flex;
    gap: 2em;
  }
  .text-content {
    width: 55%;
  }
  .media-content {
    width: 45%;
    margin-top: 0.375em;
  }
}
@media only screen and (min-width: 900px) {
  .text-content {
    width: 66.6%;
  }
  .media-content {
    width: 33.3%;
  }
}
@media screen and (min-aspect-ratio: 85/95) {
  .video-section {
    margin-top: 0;
  }
  .video-controls {
    height: 2.6em;
    padding: 0.5em;
  }
  .video-controls img {
    height: 1.6em;
  }
  .video-controls .next-prev span {
    font-size: 1.25em;
  }
  .video-progress {
    bottom: 0.0625em;
  }
  .video-list:has(ul) {
    column-count: unset;
  }
  .video-container {
    margin-right: 21em;
    margin-bottom: 0;
  }
  .video-container:after {
    display: none;
  }
  .video-container:before {
    display: none;
  }
  .video-title {
    width: auto;
    margin-right: 21em;
    margin-bottom: 0;
  }
  .video-list {
    position: absolute;
    top: 0;
    right: 0;
    width: 20em;
    height: 100%;
    overflow-y: scroll;
  }
  .video-list ul {
    margin: 0;
  }
  .video-list th {
    padding: 0.375em 0.3125em 0.125em 0.3125em;
  }
  .video-list td {
    padding: 0.3125em;
  }
  .video-poster {
    top: 0.15em;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .video-annotation {
    bottom: 2.6em;
  }
}
#enter-fullscreen {
  visibility: hidden;
}

/* Code for sticky headers */
@media screen and (min-width: 390px) {
  header .page-title {
    font-size: 1.75em;
    padding: 0 1.25em 0 3em;
  }
}
@media screen and (min-width: 425px) {
  header .page-title {
    padding: 0 1.25em 0 4em;
  }
  header .logo {
    height: 80%;
  }
}
@media screen and (min-width: 500px) {
  header .page-title {
    font-size: 2em;
    padding: 0 1em 0 3.5em;
  }
  header .logo {
    height: 90%;
  }
}
@media screen and (min-width: 750px) {
  header .page-title {
    font-size: 2.5em;
    padding: 0 0 0 2.25em;
  }
}
/* EBow Basics/Leny Jams/Animated Lessons pages */
.video-list ul {
  list-style: none;
  width: fit-content;
  padding: 0;
  margin: 0 auto;
}
.video-list li {
  font-size: 1.3em;
  color: #b8b8b8;
  padding: 0.2em 0;
  break-inside: avoid-column;
}
.video-list li > ul {
  margin-left: 0.75em;
  width: 100%;
}
.video-list li > ul li {
  color: #f00;
  font-size: 0.9em;
  font-weight: normal;
  line-height: 1.1;
  cursor: pointer;
}
@media (hover: hover) {
  .video-list li > ul li:hover {
    color: #fff;
  }
}
.video-list > ul > li {
  padding-top: 0;
}
.video-list a {
  padding: 0 0.125em;
  border-radius: 0.125em;
  pointer-events: none;
}

.video-list-title {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
}

/* Techniques page */
.video-list table {
  margin: 0 auto;
  width: fit-content;
  max-width: 32em;
  user-select: none;
}
.video-list th, .video-list td {
  text-align: center;
  padding: 0.5em 0.5em 0.125em 0;
}
.video-list th {
  font-size: 1.375em;
  margin: 0 auto;
  text-align: right;
}
.video-list tr th:nth-child(n+2) {
  text-align: center;
}
.video-list tr td:first-child:has(~ .active) {
  color: #fff;
}
.video-list td {
  color: #222;
}
.video-list td:nth-child(1) {
  font-size: 1.125em;
  text-align: right;
  color: #aaa;
}
.video-list td:nth-child(1):has(~ td .active) {
  color: #fff;
}
.video-list button {
  height: auto;
  font-size: 1em;
  padding: 0.1875em 0.25em;
  text-shadow: none;
  font-weight: normal;
  background-color: #000;
  border: 0.0625em solid #500;
  border-radius: 0.375em;
  color: #f00;
  cursor: pointer;
}
@media (hover: hover) {
  .video-list button:hover {
    color: #fff;
  }
}
.video-list button:disabled {
  color: #f00;
  opacity: 0.3;
  cursor: default;
}
.video-list .active, .video-list .active a {
  color: #fff;
}
.video-list .head {
  text-align: center;
  border-bottom: 0.0625px solid #f00;
}

/* Player's Guide page */
.guide-content {
  margin-top: 1.5em;
}

.players-guide-banner {
  height: 17.5em;
  margin: 1em 0;
  background-image: url("../images/pg-header2.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
}

.pg-page .toc {
  position: fixed;
  max-height: 90vh;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 1em;
}
.pg-page .toc h1 {
  text-align: left;
}

@media only screen and (min-width: 700px) {
  .pg-page .toc-contents {
    column-count: 2;
  }
  .pg-page .toc h1 {
    font-size: 1.75em;
    text-align: center;
  }
}
@media only screen and (min-width: 1200px) {
  .pg-page .toc-contents {
    column-count: 3;
  }
}
@media only screen and (min-width: 1500px) {
  .pg-page .toc-contents {
    column-count: 4;
  }
}
.site-map {
  max-width: 50em;
  margin: 0 auto;
}
.site-map ul {
  list-style: none;
  padding: 0;
  margin: 0.25em 0 0.75em 0;
}

.home-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 0.5em;
}
.home-group > a {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  position: relative;
  display: block;
  font-size: 2em;
  border-bottom: 0.0625em solid #f00;
  padding-bottom: 0.25em;
  padding-right: 1.5em;
}
.home-group > a:hover {
  color: #fff;
  -webkit-text-stroke-color: #fff;
}
.home-group > a:after {
  content: url("../images/nav_home_red.svg");
  position: absolute;
  top: 0;
  right: 0;
  height: 1.125em;
  width: 1.125em;
}
.home-group ul {
  display: grid;
  grid-template-columns: 4.5em 5.5em 5.5em;
  gap: 0.25em 1em;
  margin-top: 0.75em;
}
.home-group li {
  text-align: center;
}
.home-group li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.home-group li:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.home-group li:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.home-group li:nth-child(4) {
  grid-column: 1;
  grid-row: 2;
}
.home-group li:nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}
.home-group li:nth-child(6) {
  grid-column: 3;
  grid-row: 2;
}

.groups {
  display: grid;
  justify-items: center;
}
.groups h1 {
  font-family: "Handlee", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #ffe75f;
  -webkit-text-stroke: 0.025em #ffe75f;
  letter-spacing: 0.02em;
  position: sticky;
  top: 5em;
  background-color: #000;
  font-size: 1.75em;
  border-bottom: 0.08333em solid #f00;
  padding: 0 0 0.25em 1.25em;
}
.groups h1:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
}

.nav-media-map h1:after {
  content: url("../images/nav_media_red.svg");
}
@media (hover: hover) {
  .nav-media-map h1:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
  }
}

.nav-learn-map h1:after {
  content: url("../images/nav_learn_red.svg");
}
@media (hover: hover) {
  .nav-learn-map h1:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
  }
}

.nav-talk-map h1:after {
  content: url("../images/nav_talk_red.svg");
}
@media (hover: hover) {
  .nav-talk-map h1:hover {
    color: #fff;
    -webkit-text-stroke-color: #fff;
  }
}

.pages > ul > li > a {
  font-weight: normal;
  color: #ffe75f;
}
.pages > ul > li > a:hover {
  color: #fff;
}
.pages ul {
  font-size: 1.2em;
  font-weight: bold;
}
.pages li {
  padding: 0.25em 0;
}
.pages li > ul {
  font-size: 0.8em;
  font-weight: normal;
  padding-left: 0.375em;
  margin-left: 0.375em;
  margin-bottom: 0;
}

.alt-site-map .pages > ul > li > a {
  display: block;
  outline: 0;
  min-width: 2.5em;
  background-color: #500;
  color: #ddd;
  font-weight: normal;
  font-size: 0.9375em;
  letter-spacing: 0.025em;
  height: 1.85em;
  line-height: 1.15;
  padding: 0 0.9em;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.85);
  border-radius: 1.5625em;
  border: 0.06666667em solid #f00;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  font-size: 0.875em;
  width: fit-content;
  padding: 0.3125em 0.625em 0.3125em 0.625em;
}
@media (hover: hover) {
  .alt-site-map .pages > ul > li > a:hover {
    background-color: #900;
  }
}
.alt-site-map .pages li > ul {
  margin-top: 0.5em;
  padding-left: 0.375em;
}

@media only screen and (min-width: 41em) {
  .groups {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em;
  }
}
.groups h1 {
  top: 5rem;
}

@media screen and (min-width: 750px) {
  .groups h1 {
    top: 6rem;
  }
}
@media screen and (min-width: 900px) {
  .groups h1 {
    top: 7rem;
  }
}

/*# sourceMappingURL=ebow.css.map */