html, body, .container {
  height: 100%;
}

body {
  background: #3F729B;
}

.container {
  overflow-y: auto;
  background: #FFF;
  padding: 0px 20px;
  height: 100%;
}

h1 {
  background: #1C2331;
  color: #fff;
  padding: 20px;
  margin: 0px -20px 20px
}

@media(max-width: 480px) {
 h1 {
  font-size: 22px;
 }
}

h2 {
  border-bottom: 1px solid #1C2331;
  color: #1C2331;
}

h3 .glyphicon {
  font-size: 16px;
  color: #1C2331;
}

h5 {
  background: #1C2331;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px
}

.song-details {
  padding-left: 25px;
}

.song-details ul, .song-details .notes {
  background: #efefef;
  padding: 10px 10px 10px 25px;
}

audio {
  width: 100%;
}

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/*Paul Marini edits*/
h3 {
	font-size: 20px;
}