h1 {font-size: 20px; font-weight: normal; padding: 0 0 15px 0;}
h1 span{color: #cb2930; font-weight: bold;}

ul.chords {display: block; list-style: none; margin: 0 -10px;}
ul.chords li{display: block; width: 25%; float: left;}
ul.chords li a{display: block; padding: 25px 15px; margin: 10px; text-align: center; background-color: #ecf3fc; border-radius: 5px;}
ul.chords li:nth-child(even) a{background-color: #f5f8fc;}
ul.chords li a:hover{background-color: #dae6f5;}
ul.chords li a h2{font-size: 26px;}
ul.chords li a p{padding: 10px 0 0 0;}

ul.subchords {display: block; list-style: none; margin: 0 -10px;}
ul.subchords li{display: block; width: 25%; float: left;}
ul.subchords li a{display: block; padding: 25px 2px; margin: 10px; text-align: center; background-color: #ecf3fc; border-radius: 5px;}
ul.subchords li:nth-child(even) a{background-color: #f5f8fc;}
ul.subchords li a:hover{background-color: #dae6f5;}
ul.chords li a h2{font-size: 22px;}

.chordbox {text-align: center; padding: 25px 0;}
.chordbox p{display: block; padding: 25px;}
.chordbox a span{display: inline-block; padding: 0 20px 0 56px; font-size: 16px; height: 42px; line-height: 42px; position: relative; background-color: #f9f9f9; border-radius: 21px 5px 5px 21px;}
.chordbox a span:before{content: ""; display: block; position: absolute; top: 0px; left: 0px; background: url('../images/play.svg') 18px center no-repeat #cb2930; width: 42px; height: 42px; border-radius: 50%;}
.chordbox a:hover span:before {background-color: #bb232a;}
.chordbox a.active {pointer-events: none; cursor: default;}
.chordbox a.active span{color: #aaaaaa;}
.chordbox a.active span:before {background: url('../images/speaker.svg') 13px 14px no-repeat #bbbbbb; animation: playing 1s steps(1) infinite;}

svg.chord {width: 200px; height: auto; max-width: 100%;}
svg.chord .grid{stroke: black; stroke-linecap: round;}
svg.chord .labels{fill: white;}
svg.chord .text{font-family: Arial, sans-serif;}
svg.chord .title{font-size:150%;}

@media screen and (max-width: 986px) {
ul.chords li{width: 20%;}
ul.chords li a{padding: 20px 10px; margin: 10px;}
}
@media screen and (max-width: 790px) {
ul.chords li{width: 25%;}
}
@media screen and (max-width: 580px) {
ul.chords li{width: 33.33%;}
}
@media screen and (max-width: 480px) {
ul.chords li{width: 50%;}
ul.subchords li{width: 33.33%;}
ul.chords li:nth-child(odd) {clear: both;}
}

@keyframes playing {
  0% {background-position: 13px 14px;}
  50% {background-position: 13px -36px;}
}