.course .box-course {
  color: #fff; }
  .course .box-course h1 {
    font-size: 2.2em;
    margin: 1.8em 0 1em; }
  .course .box-course h2 {
    font-size: 1.8em;
    margin: 1.8em 0 1em; }
  .course .box-course h3 {
    font-size: 1.6em;
    margin: 1.5em 0 1em; }
  .course .box-course p {
    color: #aaa;
    font-size: 1.4em;
    margin-bottom: 1em; }
    .course .box-course p small {
      color: inherit; }
    .course .box-course p.time {
      font-size: .9em;
      color: #999; }
    .course .box-course p.highlight {
      margin: 35px 6px 10px 0;
      color: #fff;
      position: relative; }
      .course .box-course p.highlight .fa {
        position: absolute;
        left: -35px;
        top: 0;
        font-size: 28px;
        color: #555; }
      .course .box-course p.highlight .timesig sub, .course .box-course p.highlight .timesig sup {
        color: #fff; }
    .course .box-course p.next {
      margin-top: 30px; }
  .course .box-course a {
    color: #03b5b5;
    transition: all 0.2s ease; }
    .course .box-course a:hover {
      color: #14e8e8; }
  .course .box-course .btn {
    color: #fff; }
    .course .box-course .btn:hover {
      color: #fff; }
  .course .box-course .highlight-a {
    color: #88ae7c; }
  .course .box-course .highlight-b {
    color: #5691a0; }
  .course .box-course .highlight-c {
    color: #dfc0ea; }
  .course .box-course .text-lg {
    font-size: 1.48em; }
  .course .box-course b {
    color: #eee;
    font-weight: normal; }
  .course .box-course ul, .course .box-course ol {
    margin: 1.2em 0; }
    .course .box-course ul li, .course .box-course ol li {
      color: #999;
      font-size: 1.4em;
      line-height: 1.6em;
      margin-bottom: 0.5em; }
  .course .box-course .indent {
    margin: 25px; }
  .course .box-course .answers {
    font-size: 1.3em;
    color: #777;
    cursor: pointer;
    user-select: none;
    margin-bottom: 20px; }
    .course .box-course .answers .reveal-btn {
      transition: all 0.2s ease;
      opacity: .6;
      display: block;
      margin: 0 0 6px 0; }
    .course .box-course .answers:hover .reveal-btn {
      opacity: 1; }
    .course .box-course .answers[show="yes"] .reveal-answers {
      opacity: 1; }
    .course .box-course .answers[show="yes"] .reveal-btn {
      opacity: 1; }
    .course .box-course .answers .reveal-answers {
      transition: all 0.2s ease;
      opacity: 0;
      color: #fff; }
      .course .box-course .answers .reveal-answers small, .course .box-course .answers .reveal-answers sup, .course .box-course .answers .reveal-answers sup {
        color: #fff; }
  .course .box-course .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #E8E8E8;
    font-size: 12px;
    border-radius: 50%;
    margin-right: 2px; }
  .course .box-course .timesig {
    width: 32px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    text-align: center;
    vertical-align: middle; }
    .course .box-course .timesig sub, .course .box-course .timesig sup {
      color: #999;
      font-size: 14px; }
  .course .box-course .scale-pattern {
    color: #666; }
  .course .box-course .interval-whole {
    color: #009a9c; }
  .course .box-course .interval-half {
    color: #abeb88; }
  .course .box-course .block-test {
    background: #222;
    padding: 12px;
    margin: 10px 0 20px;
    border-radius: 8px;
    position: relative; }
    .course .box-course .block-test .block-test-box {
      min-height: 345px; }
    .course .box-course .block-test .block-test-name {
      font-size: 1.5em;
      margin: 10px 0 6px; }
    .course .box-course .block-test .block-test-comment {
      font-size: 1.3em;
      color: #999; }
    .course .box-course .block-test .block-test-btn {
      cursor: pointer;
      margin: 15px;
      border: none;
      padding: 6px 12px;
      text-align: center;
      border-radius: 3px;
      color: #fff;
      background: #666;
      transition: all 0.2s ease;
      font-size: 1.2em; }
      .course .box-course .block-test .block-test-btn:hover {
        background: #444; }
    .course .box-course .block-test .training-panel {
      background: #222; }
      .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover {
        background: #222; }
        .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-1 {
          font-size: 1.4em; }
        .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-2 {
          font-size: 1.3em; }
        .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-3 {
          font-size: 1.2em; }
      .course .box-course .block-test .training-panel .training-panel-strip button, .course .box-course .block-test .training-panel .training-panel-body .rhythm-start-btn button {
        background: #666;
        transition: all 0.2s ease;
        font-size: 1.2em; }
        .course .box-course .block-test .training-panel .training-panel-strip button:hover, .course .box-course .block-test .training-panel .training-panel-body .rhythm-start-btn button:hover {
          background: #444; }
      .course .box-course .block-test .training-panel .training-panel-body .rhythm-question .rhythm-instructions span {
        color: #fff;
        font-size: 1.2em; }
      .course .box-course .block-test .training-panel .training-panel-body .training-select-btn {
        font-size: 1.2em; }
  .course .box-course .external {
    background: #222;
    box-shadow: 0 0 0 1px #444;
    padding: 12px;
    margin: 10px 0 20px;
    border-radius: 8px;
    font-size: 1.3em; }
  .course .box-course .notation {
    background: #f5f5f5;
    box-shadow: 0 0 0 1px #ccc;
    padding: 12px;
    margin: 10px 0 20px;
    border-radius: 8px;
    position: relative; }
    .course .box-course .notation .notation-step {
      display: none; }
      .course .box-course .notation .notation-step[active="yes"] {
        display: block; }
      .course .box-course .notation .notation-step .notation-title {
        color: #111;
        font-size: 1.4em;
        font-weight: bold;
        margin-top: 8px;
        margin-bottom: 8px; }
      .course .box-course .notation .notation-step .notation-description {
        font-size: 1.2em;
        color: #666;
        margin-bottom: 20px;
        min-height: 80px; }
    .course .box-course .notation .notation-page {
      font-size: 16px;
      line-height: 30px;
      color: #999; }
      .course .box-course .notation .notation-page [current] {
        color: #111; }
    .course .box-course .notation .notation-btn {
      cursor: pointer;
      border: none;
      padding: 4px 8px;
      text-align: center;
      border-radius: 3px;
      font-size: 1.1em;
      user-select: none;
      background: #999;
      color: #ccc; }
      .course .box-course .notation .notation-btn[active="yes"] {
        background: #333;
        color: #fff; }
    .course .box-course .notation .notation-sheet {
      padding: 12px;
      user-select: none;
      cursor: pointer; }
      .course .box-course .notation .notation-sheet svg > g {
        opacity: 0;
        transition: all 0.2s ease; }
        .course .box-course .notation .notation-sheet svg > g[showed="yes"] {
          opacity: .4; }
        .course .box-course .notation .notation-sheet svg > g[active="yes"] {
          opacity: 1; }
  .course .box-course .component[color="0"] {
    background: #252525; }
  .course .box-course .component[color="1"] {
    background: #abeb88; }
  .course .box-course .component[color="2"] {
    background: #67d294; }
  .course .box-course .component[color="3"] {
    background: #17b79c; }
  .course .box-course .component[color="4"] {
    background: #009a9c; }
  .course .box-course .component[color="5"] {
    background: #005e7d; }
  .course .box-course .component[color="6"] {
    background: #274d6f; }
  .course .box-course .component[color="7"] {
    background: #364688; }
  .course .box-course .component[color="8"] {
    background: #463688; }
.course .course-navigation {
  position: relative;
  margin-top: 5px;
  z-index: 5;
  box-shadow: 0 1px 5px 0 #000; }
  .course .course-navigation .course-navigation-head {
    color: #999;
    font-size: 1.3em;
    user-select: none;
    background: #222;
    padding: 15px;
    position: relative; }
    .course .course-navigation .course-navigation-head .open-navigation-btn {
      cursor: pointer;
      user-select: none; }
    .course .course-navigation .course-navigation-head[is-open="no"] .close-navigation-btn {
      opacity: 0; }
    .course .course-navigation .course-navigation-head .close-navigation-btn {
      position: absolute;
      right: 10px;
      top: 3px;
      font-size: 34px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      opacity: 1; }
  .course .course-navigation .course-navigation-body {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #222;
    display: none;
    padding: 15px;
    min-height: 466px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 5px 5px 0 #000; }
    .course .course-navigation .course-navigation-body[show="yes"] {
      display: block; }
    .course .course-navigation .course-navigation-body .course-navigation-subtitle {
      color: #666;
      font-size: 1.1em;
      margin-bottom: 15px; }
    .course .course-navigation .course-navigation-body .course-navigation-chapter {
      user-select: none;
      cursor: pointer;
      margin-bottom: 8px;
      display: block; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter:hover .chapter-title, .course .course-navigation .course-navigation-body .course-navigation-chapter:hover .chapter-icon {
        color: #ccc; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter:hover .chapter-fold {
        opacity: .5; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter .chapter-title {
        transition: all 0.2s ease;
        font-size: 1.3em;
        color: #999; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter .chapter-icon {
        transition: all 0.2s ease;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #333;
        color: #999;
        font-size: 13px;
        border-radius: 50%;
        margin-right: 8px; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter .chapter-fold {
        transition: all 0.2s ease;
        display: inline-block;
        margin-left: 5px;
        opacity: 0;
        color: #999; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter[show="yes"] .chapter-title, .course .course-navigation .course-navigation-body .course-navigation-chapter[show="yes"] .chapter-icon {
        color: #fff; }
      .course .course-navigation .course-navigation-body .course-navigation-chapter[show="yes"] .chapter-fold {
        opacity: 1; }
    .course .course-navigation .course-navigation-body .course-navigation-lessons {
      display: none;
      line-height: 26px; }
      .course .course-navigation .course-navigation-body .course-navigation-lessons[show="yes"] {
        display: block; }
      .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson {
        font-size: 1.25em;
        margin-bottom: 10px;
        display: block;
        color: #999; }
        .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson:hover {
          color: #ccc; }
          .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson:hover .active-lesson-icon {
            opacity: .3; }
        .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson .active-lesson-icon {
          width: 20px;
          text-align: center;
          transition: all 0.2s ease;
          opacity: 0; }
        .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson[active="yes"] a {
          color: #fff; }
        .course .course-navigation .course-navigation-body .course-navigation-lessons .lesson[active="yes"] .active-lesson-icon {
          opacity: 1; }
.course .course-pagination {
  margin-top: 50px; }
  .course .course-pagination .prev {
    color: #777;
    font-size: 1.2em;
    line-height: 1.6em; }
    .course .course-pagination .prev:hover {
      color: #999; }
.course .course-table {
  background: #191919;
  box-shadow: 0 0 0 1px #111;
  padding: 12px;
  margin: 10px 0 20px;
  border-radius: 8px; }
  .course .course-table th {
    padding: 10px;
    color: #777;
    font-weight: normal;
    text-align: left; }
  .course .course-table td {
    color: #ccc;
    padding: 8px 10px;
    border-top: 1px solid #111;
    text-align: left;
    font-size: 1.4em; }
.course .course-keyboard {
  background: #333;
  border: none;
  padding: 6px 10px 2px 10px;
  transition: all 0.2s ease;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 15px; }
  .course .course-keyboard .listen-btn {
    display: block;
    height: 32px;
    line-height: 32px;
    margin-bottom: 6px;
    vertical-align: middle;
    text-shadow: 0 0 4px #000, 0 0 10px #000;
    font-size: 18px;
    border: none;
    background: none;
    user-select: none;
    outline: none;
    cursor: pointer; }
    .course .course-keyboard .listen-btn .btn-icon {
      display: inline-block;
      width: 36px;
      text-align: center; }
    .course .course-keyboard .listen-btn .btn-name {
      display: inline-block; }
  .course .course-keyboard .keyboard {
    height: 120px;
    position: relative; }
    .course .course-keyboard .keyboard .key {
      position: relative;
      float: left;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 5px 0;
      user-select: none;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      text-align: center; }
      .course .course-keyboard .keyboard .key:first-child {
        border-radius: 5px 0 5px 5px; }
      .course .course-keyboard .keyboard .key:last-child {
        border-radius: 0 5px 5px 5px; }
      .course .course-keyboard .keyboard .key[color="white"] {
        height: 110px;
        width: 40px;
        z-index: 1;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #f5f5f5;
        background: #f5f5f5;
        color: #111; }
        .course .course-keyboard .keyboard .key[color="white"][highlight="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #999; }
        .course .course-keyboard .keyboard .key[color="white"][mark="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #6de9ff; }
        .course .course-keyboard .keyboard .key[color="white"][pressed="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #fcde74; }
        .course .course-keyboard .keyboard .key[color="white"][pressed="no"]:hover {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #fcf0c7; }
      .course .course-keyboard .keyboard .key[color="black"] {
        height: 70px;
        width: 30px;
        margin: 0 0 0 -15px;
        z-index: 2;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #333;
        background: #333;
        color: #eee; }
        .course .course-keyboard .keyboard .key[color="black"][highlight="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #999;
          color: #111; }
        .course .course-keyboard .keyboard .key[color="black"][mark="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #6de9ff; }
        .course .course-keyboard .keyboard .key[color="black"][pressed="yes"] {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #fcde74; }
        .course .course-keyboard .keyboard .key[color="black"][pressed="no"]:hover {
          box-shadow: 0 0 0 1px #aaa, inset 0 0 0 20px #51451f; }
      .course .course-keyboard .keyboard .key[offset="1"] {
        margin: 0 0 0 -15px; }
.course .course-scale {
  background: #333;
  margin-bottom: 15px;
  border: none;
  padding: 0;
  transition: all 0.2s ease;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  user-select: none; }
  .course .course-scale .listen-btn {
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 8px 8px;
    text-shadow: 0 0 4px #000, 0 0 10px #000;
    font-size: 1.4em;
    border: none;
    user-select: none;
    outline: none;
    cursor: pointer; }
    .course .course-scale .listen-btn .btn-icon {
      display: inline-block;
      width: 20px;
      margin-right: 4px;
      text-align: center; }
    .course .course-scale .listen-btn .btn-name {
      display: inline-block; }
  .course .course-scale .keyboard {
    position: relative;
    padding: 7px 4px 5px; }
    .course .course-scale .keyboard .keys {
      font-size: 0; }
      .course .course-scale .keyboard .keys .key {
        display: inline-block;
        position: relative;
        user-select: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 17px;
        text-align: center;
        z-index: 1;
        color: rgba(255, 255, 255, 0.4);
        width: 38px;
        height: 38px;
        line-height: 38px;
        border-radius: 8px;
        margin: 0 2px 2px 0;
        box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0), inset 0 0 0 30px rgba(0, 0, 0, 0.2); }
        .course .course-scale .keyboard .keys .key[highlight="yes"] {
          box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0), inset 0 0 0 30px rgba(0, 0, 0, 0.6);
          color: white; }
        .course .course-scale .keyboard .keys .key[mark="yes"] {
          box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.6), inset 0 0 0 30px rgba(0, 0, 0, 0.6);
          color: white; }
        .course .course-scale .keyboard .keys .key[pressed="yes"] {
          box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0), inset 0 0 0 30px #fcde74; }
        .course .course-scale .keyboard .keys .key[pressed="no"]:hover {
          box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0), inset 0 0 0 30px rgba(0, 0, 0, 0.3); }
    .course .course-scale .keyboard .steps {
      font-size: 0;
      padding-left: 21px;
      transition: all 0.2s ease; }
      .course .course-scale .keyboard .steps[hint="0"] {
        opacity: 0; }
      .course .course-scale .keyboard .steps[hint="1"] {
        opacity: 1; }
      .course .course-scale .keyboard .steps .step {
        display: inline-block;
        position: relative;
        user-select: none;
        transition: all 0.2s ease;
        text-align: center;
        z-index: 1;
        color: #444;
        height: 40px;
        line-height: 50px;
        margin-top: 8px; }
        .course .course-scale .keyboard .steps .step.step-H {
          width: 40px;
          color: #abeb88; }
          .course .course-scale .keyboard .steps .step.step-H .step-label {
            margin: 0 3px; }
        .course .course-scale .keyboard .steps .step.step-W {
          width: 80px;
          color: #009a9c; }
          .course .course-scale .keyboard .steps .step.step-W .step-label {
            margin: 0 18px; }
        .course .course-scale .keyboard .steps .step.step-M3 {
          width: 200px;
          color: #fff; }
          .course .course-scale .keyboard .steps .step.step-M3 .step-label {
            margin: 0 50px; }
        .course .course-scale .keyboard .steps .step.step-P5 {
          width: 350px;
          color: #fff; }
          .course .course-scale .keyboard .steps .step.step-P5 .step-label {
            margin: 0 130px; }
        .course .course-scale .keyboard .steps .step.step-P8 {
          width: 600px;
          color: #fff; }
          .course .course-scale .keyboard .steps .step.step-P8 .step-label {
            margin: 0 250px; }
        .course .course-scale .keyboard .steps .step .step-label {
          font-size: 20px;
          vertical-align: bottom; }
        .course .course-scale .keyboard .steps .step .step-left-pointer, .course .course-scale .keyboard .steps .step .step-right-pointer {
          font-size: 16px;
          display: inline-block;
          vertical-align: top; }
        .course .course-scale .keyboard .steps .step .step-left-pointer {
          transform: rotate(-210deg); }
        .course .course-scale .keyboard .steps .step .step-right-pointer {
          transform: rotate(30deg); }
    .course .course-scale .keyboard .intervals {
      font-size: 0;
      transition: all 0.2s ease; }
      .course .course-scale .keyboard .intervals[hint="0"] {
        opacity: 0; }
      .course .course-scale .keyboard .intervals[hint="1"] {
        opacity: 1; }
      .course .course-scale .keyboard .intervals .interval {
        position: relative;
        user-select: none;
        z-index: 1;
        left: 0;
        font-size: 16px;
        width: 38px;
        height: 38px;
        text-align: center;
        color: #fff;
        display: inline-block; }
        .course .course-scale .keyboard .intervals .interval.interval-0 {
          opacity: 0; }
        .course .course-scale .keyboard .intervals .interval.interval-1 {
          opacity: .1; }
        .course .course-scale .keyboard .intervals .interval.interval-2 {
          opacity: 1; }
        .course .course-scale .keyboard .intervals .interval .interval-label {
          position: absolute;
          top: 28px;
          width: 100%;
          text-align: center; }
        .course .course-scale .keyboard .intervals .interval .interval-arrows .fa-circle {
          position: absolute;
          left: 8px;
          top: 10px;
          font-size: 6px; }
        .course .course-scale .keyboard .intervals .interval .interval-arrows .fa-long-arrow-right {
          position: absolute;
          left: 18px;
          top: 5px;
          font-size: 16px; }
        .course .course-scale .keyboard .intervals .interval .interval-arrows .fa-minus {
          position: absolute;
          left: 32px;
          top: 5px;
          font-size: 16px;
          transform: rotate(90deg); }
.course .course-metronome {
  margin: 0 5px 10px 0;
  border: none;
  padding: 0;
  line-height: 20px;
  transition: all 0.2s ease;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  user-select: none; }
  .course .course-metronome .title {
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 8px 8px;
    font-size: 1.4em;
    text-shadow: 0 0 4px #000, 0 0 10px #000; }
  .course .course-metronome .listen-btn {
    display: inline-block;
    width: 20px;
    margin-right: 4px;
    text-align: center;
    vertical-align: middle;
    border: none;
    background: none;
    user-select: none;
    outline: none; }
  .course .course-metronome .name {
    display: inline-block;
    text-align: center;
    vertical-align: middle; }
    .course .course-metronome .name small {
      color: inherit; }
  .course .course-metronome .dots {
    padding: 2px; }
    .course .course-metronome .dots .dot {
      line-height: 32px;
      width: 28px;
      height: 28px;
      text-align: center;
      display: inline-block;
      vertical-align: middle; }
      .course .course-metronome .dots .dot[led="0"] {
        color: transparent; }
      .course .course-metronome .dots .dot[led="1"] {
        color: rgba(0, 0, 0, 0.2); }
      .course .course-metronome .dots .dot[led="2"] {
        color: rgba(0, 0, 0, 0.5); }
      .course .course-metronome .dots .dot[led="3"] {
        color: rgba(0, 0, 0, 0.7); }
      .course .course-metronome .dots .dot[is-active="yes"]:not([led="0"]) .fa {
        color: #fcde74;
        text-shadow: 0 0 1px #000; }
      .course .course-metronome .dots .dot[is-active="yes"] .fa {
        transform: scale(1.5, 1.5);
        transition-duration: 0.1s; }
      .course .course-metronome .dots .dot .fa {
        font-size: 20px;
        transition: all 0.6s ease; }
.course .course-progression {
  margin: 0;
  font-size: 0; }
  .course .course-progression button {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    margin: 0;
    border: 3px solid #111;
    background: #333;
    position: relative;
    text-align: center;
    transition: all 0.15s ease;
    box-shadow: inset 0 0 0 50px rgba(255, 255, 255, 0); }
    .course .course-progression button .roman {
      text-shadow: 0 0 5px #000;
      font-size: 32px;
      color: white; }
    .course .course-progression button:hover {
      box-shadow: inset 0 0 0 50px rgba(255, 255, 255, 0.2); }
    .course .course-progression button:active {
      box-shadow: inset 0 0 0 50px rgba(255, 255, 255, 0.7); }
    .course .course-progression button[color="1"] {
      background: #abeb88; }
    .course .course-progression button[color="2"] {
      background: #67d294; }
    .course .course-progression button[color="3"] {
      background: #17b79c; }
    .course .course-progression button[color="4"] {
      background: #009a9c; }
    .course .course-progression button[color="5"] {
      background: #005e7d; }
    .course .course-progression button[color="6"] {
      background: #274d6f; }
    .course .course-progression button[color="7"] {
      background: #364688; }
    .course .course-progression button[color="8"] {
      background: #463688; }
.course .scale-note {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  background: #aaa;
  color: #ccc;
  border-radius: 50%;
  text-align: center;
  margin-right: 3px; }
  .course .scale-note.scale-note-highlight {
    background: #222;
    color: #fff; }
.course .progression-sign {
  line-height: 20px;
  font-size: 20px;
  font-weight: bold; }
  .course .progression-sign.progression-sign-highlight {
    background: #222;
    color: #fff; }
.course .course-guitar [id^=k-] {
  opacity: 0;
  transition: all 0.2s ease; }
  .course .course-guitar [id^=k-][show="yes"] {
    opacity: 1; }

@media (max-width: 768px) {
  .course .course-metronome .title {
    font-size: 1.2em; }
  .course .course-metronome .dots .dot {
    width: 18px; }
    .course .course-metronome .dots .dot .fa {
      font-size: 16px; }
  .course .box-course h1 {
    font-size: 2.0em;
    margin: 1.6em 0 .8em; }
  .course .box-course h2 {
    font-size: 1.6em;
    margin: 1.6em 0 .8em; }
  .course .box-course h3 {
    font-size: 1.4em;
    margin: 1.3em 0 .8em; }
  .course .box-course p {
    font-size: 1.25em;
    margin-bottom: .8em; }
    .course .box-course p.time {
      font-size: .7em; }
    .course .box-course p.highlight {
      margin: 25px 6px 10px 0; }
      .course .box-course p.highlight .fa {
        color: transparent; }
    .course .box-course p.next {
      margin-top: 20px; }
  .course .box-course .text-lg {
    font-size: 1.28em; }
  .course .box-course ul, .course .box-course ol {
    margin: 1.0em 0; }
    .course .box-course ul li, .course .box-course ol li {
      font-size: 1.25em;
      line-height: 1.4em;
      margin-bottom: 0.4em; }
  .course .box-course .indent {
    margin: 5px; }
  .course .box-course .answers {
    font-size: 1.25em;
    margin-bottom: 16px; }
  .course .box-course .block-test .block-test-name {
    font-size: 1.25em; }
  .course .box-course .block-test .block-test-comment {
    font-size: 1.1em; }
  .course .box-course .block-test .block-test-btn {
    font-size: 1.1em; }
  .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-1 {
    font-size: 1.2em; }
  .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-2 {
    font-size: 1.1em; }
  .course .box-course .block-test .training-panel .training-panel-feedback .training-panel-cover .training-title-3 {
    font-size: 1.0em; }
  .course .box-course .block-test .training-panel .training-panel-strip button, .course .box-course .block-test .training-panel .training-panel-body .rhythm-start-btn button {
    font-size: 1.0em; }
  .course .box-course .block-test .training-panel .training-panel-body .rhythm-question .rhythm-instructions span {
    font-size: 1.0em; }
  .course .box-course .block-test .training-panel .training-panel-body .training-select-btn {
    font-size: 1.0em; }
  .course .box-course .external {
    font-size: 1.1em; }
  .course .course-scale .listen-btn {
    font-size: 1.2em; }
  .course .course-scale .keyboard .steps {
    display: none; }
  .course .course-scale .keyboard .intervals {
    display: none; }
  .course .course-table td {
    font-size: 1.25em; } }

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