@font-face {
  font-family: 'Mona Sans';
  src:
    url('/static/stations/fonts/Mona-Sans.woff2') format('woff2 supports variations'),
    url('/static/stations/fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

h1, h2,h3,h4,h5,h6 {
     /*font-family: 'Heebo', sans-serif;*/
      font-family: 'Mona Sans', sans-serif;
}

h2 {
    font-weight: 800;
}
h3 {
    font-weight: 700;
}
h4 {
    font-weight: 800;
}


.button-circle {
    border-radius: 50%;
    padding: 1em;
}

.button-circle-play {
    /*height: 1em;*/
    /*width: 3em;*/

    /*-webkit-transition: color 0s 1s, max-width 1s;*/
    /*transition: color 0s 1s, max-width 1s;*/
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    max-width: 3em;
    overflow: hidden;
    white-space: nowrap;
    height: 3em;
}

.button-circle-play-text {
    display: inline;
    -webkit-transition: opacity 0.2s 0.1s;
    transition: opacity 0.2s 0.1s;
    opacity: 0;
}

.button-circle-play:hover  {
    max-width: 300px;
}

.button-circle-play:hover  .button-circle-play-text {
    opacity: 1;
}


.button-circle-play img {
    height: 1em;
    margin-bottom: 4px;
}


.hr-blue {
    /*color: linear-gradient(0deg, #40dea4 0%, #36d0a4 20%, #1baba3 64%, #0087a3 100%);*/
    /*height: 4px;*/
    /*border: 1px solid #998ff1;*/
    /*width: 100%;*/
    /*position: absolute;*/
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
    linear-gradient(-90deg, #40dea4 0%, #36d0a4 20%, #1baba3 64%, #0087a3 100%) border-box;
}

.button-over-hr {
    text-align: center;
    margin-bottom: -3.5rem;
}