.hidden {
  display: none;
}

.carousel-control-next-icon {
  background-color: green;
}

.carousel-control-prev-icon {
  background-color: green;
}

a.chord-practice-brand {
  background: image-url(/assets/guitar-11ab4177e0e6cf8bf59d57086340defed0b64ac0464057a64f90a3751f7b8d32.png);
  background-repeat: no-repeat;
  height: 40px;
  width: 30px;
}
.chord-list {
  width: 100%;
  ul {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    li {
      float: none;
      display: inline-block;
      width: 100px;
    }
  }
}

.fretboard {
  cursor: hand;
  cursor: pointer;
  z-index: -1;
  pointer-events: none;
  header {
    padding-left: 5px;
    .name {
      font-weight: bold;
    }
    &.tiny {
      .name {
        font-size: 12px;
      }
      .bases {
        font-size: 10px;
      }
    }
    &.small {
      .name {
        font-size: 16px;
      }
      .bases {
        font-size: 12px;
      }
    }
    &.default {
      .name {
        font-size: 20px;
      }
    }
  }
}
@import url('https://rsms.me/inter/inter.css');
.blockquote {
    font-style: italic;
    color: #aaaaaa;
    font-size: 0.75rem;
}

header.masthead {
  margin-bottom: 50px;
  background: no-repeat center center;
  background-color: #555555;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  .site-heading,
  .post-heading,
  .page-heading {
    padding: 50px 0 50px;
    color: white;
  }
  .site-heading,
  .page-heading {
    h1 {
      font-size: 50px;
      margin-top: 0;
    }
    .subheading {
      font-size: 24px;
      font-weight: 300;
      line-height: 1.1;
      display: block;
      margin: 10px;
    }
    @media only screen and (min-width: 768px) {
      h1 {
        font-size: 80px;
      }
    }
  }
  .post-heading {
    h1 {
      font-size: 35px;
    }
    .subheading, .meta {
      line-height: 1.1;
      display: block;
    }
    .subheading {
      font-size: 24px;
      font-weight: 600;
      margin: 10px 0 30px;
    }
    .meta {
      font-size: 20px;
      font-weight: 300;
      font-style: italic;
      a {
        color: white;
      }
    }
    @media only screen and (min-width: 768px) {
      h1 {
        font-size: 55px;
      }
      .subheading {
        font-size: 30px;
      }
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */