body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

header.masthead>.overlay>.container {
  background: url('../images/mpringtones-bg3.png') no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

header.masthead>.overlay {
  /*padding: 1rem 0;*/
  text-align: center;
  background: #1461648a;
}

.hidden-sm{
  display: none;
}

.ads-container{
  min-height: 90px;
  height: 100%;
  width: 100%;
  border: #1c7430 solid thin;
}

.display-1{
  font-size: 2rem;
}

.display-4{
  font-size: 1.2rem;
}

.bg-ocean-blue{
  background-color: #09616f;
}

.tone-categories{
  margin-left:auto;
  padding: 0;
}

.tone-categories li{
  list-style: none;
  padding: 3px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.tone-categories li a{
  font-weight: 600;
  text-align: left;
}

.header-title{
  border-bottom: solid thick #0f8271;
  background-color: lightcyan;
  padding: 10px 10px 4px 16px;
}

.color-green{
  color: #0f8271;
  font-style: italic;
}

icon{
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.icon-green {
  fill: #17a2b8;
}

.icon-orange {
  fill: orange;
}
.icon-grey {
  fill: #6c757d;
}

.icon-medium {
  width: 2.5rem;
  height: 2.5rem;
}

.star-rating {
  display: grid;
  grid-template-columns: repeat(5, 1rem);
  justify-content: center;
  grid-gap: 1rem;
}

.star-rating> span {
  font-size: 1rem;
}

.progress{
  margin-bottom: 1rem;
}

.progress-star{
  padding: 0;
  margin-top: -4px;
}

.progress-star-span{
  position: absolute;
  margin: -2px 0;
}

.profile-ratings{
  width: 4rem;
  text-align: center;
  background: cadetblue;
  border: solid thin #ccc;
  height: 4rem;
  color: #fff;
  font-size: 42px;
  font-weight: 700;
}

.bg-honeydew{
  background: honeydew;
}

.bg-aliceblue{
  background: aliceblue;
}
/*.active{*/
/*  z-index: 3;*/
/*  color: #fff;*/
/*  cursor: default; !important;*/
/*  background-color: #337ab7;*/
/*  border-color: #337ab7;*/
/*}*/

/*.disabled{*/
/*  color: #777;*/
/*  cursor: not-allowed;*/
/*  background-color: #fff;*/
/*  border-color: #ddd;*/
/*}*/

.btn--width{
  width: 100%;
  padding: 1rem 0;
}

@media (min-width: 576px) {
  .display-1{font-size: 5rem;}
  .display-4{font-size: 3rem;}
  .hidden-sm{display: unset;}
}


@media (min-width: 992px) {
  header.masthead>.overlay {
    /*padding: 2rem 0;*/
  }
}