@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

html{background:linear-gradient(to bottom, #3498db 0%,#173160 80%) no-repeat;height:100%;} /* for fun */
body{margin:0;color:white;font-size:small;font-weight:400;font-family:Raleway,sans-serif;}
body *{box-sizing:border-box;}



button{width:30%;height:50px;border:none;padding:0;cursor:pointer;border:4px solid white;background:rgba(250,250,250, 0);transition:background .25s ease-in-out;margin:1vw auto;}
button:hover{background:rgba(250,250,250,.35);transition:background .25s ease-in-out;}

.container{display:flex;flex-direction:column;justify-content:center;width:50vw;margin:5% auto 0;}

figure,figure>div,.container > div{display:block;margin:0 auto;}
figure,.container > div{width:100%;display: flex;}

/* figure>div{width:8vw;} */

progress{width:20vw;height:4px;border-radius:22px;display:block;margin:1em auto .2em;appearance:none;background:white!important;border:none;}
progress::-moz-progress-bar{background-color:rgb(71, 183, 244);}
progress::-webkit-progress-value{background-color:rgb(71, 183, 244);}
progress::progress-bar{background-color:rgb(71, 183, 244);}

.container > div:first-of-type{position:relative;}
.container > div:last-of-type{display:flex;flex-wrap:no-wrap;justify-content:center;}


button:first-of-type{border-radius:22px 0 0 22px}
button:last-of-type{border-radius:0 22px 22px 0;}

svg{width:24px;position:relative;top:.15em;}
use{fill:white}
.onpause{visibility:hidden;}

button,progress{box-shadow:0 3px 5px 2px rgba(51, 51, 51,.4);}

figcaption{text-align:center;margin:1em 0;text-shadow:3px 5px 2px rgba(51,51,51,.4);}

.bold{font-weight:700;}

input[type=range]{
  appearance:scroll-horizontal;
  height: 4px;
  width: 100%;
  background: white;
  border: none;
  position: absolute;
  right: 0;
  top: 10px;
  cursor: pointer;
}

/*.container>div{display:none;visibility:hidden;}*/

.loop{display:block;position:absolute;top:-8px;right:6vw;cursor:pointer}
.radioImg img{
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 180px;
    margin: 0 auto;
}

.audio-player {
    height: 50px;
    width: 350px;
    background: #444;
    box-shadow: 0 0 20px 0 #000a;
    font-family: arial;
  /*  color: white;*/
    font-size: 0.75em;
    overflow: hidden;
    display: grid;
    grid-template-rows: 6px auto;
}

.audio-player .timeline .progress {
    background: coral;
    width: 0%;
    height: 100%;
    transition: 0.25s;
}
.audio-player .timeline {
    background: white;
    width: 100%;
    height: 5px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 10px 0 #0008;
    margin: 1rem 0 0 0;
}

.radioImg {
    position: relative;
    /* border: 1px solid red; */
}

@keyframes hearbeat_scale{
    0%{transform:scale(1)}
    50%{transform:scale(.75)}
    100%{transform:scale(1)}
}

.onda{
    position: relative;
    position: relative;
    top: -21px;
    left: -10px;
    display: none;
}

.onda:after{
    content: "";
    position: absolute;
    top: 11px;
    left: 11px;
    height: 40px;
    width: 40px;
    background-color: #ffffff;
    border-radius: 100%;
    opacity: .3;
    animation: hearbeat_scale 1s infinite;
}

.onda:before{
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    height: 22px;
    width: 22px;
    background-color: #ffffff;
    border-radius: 100%;
    animation: hearbeat_scale 1s infinite;
}

@media screen and (max-width:600px){
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 90%;
        margin: 50px auto 0;
    }
    input[type=range] {
        appearance: scroll-horizontal;
        height: 4px;
        width: 100%;
        background: white;
        border: none;
        position: absolute;
        right: 0;
        top: 1px;
        cursor: pointer;
    }

    .onda {
        position: relative;
        position: relative;
        top: -21px;
        left: -10px;
        display: none;
    }
    /* .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 90vw;
        margin: 5% auto 0;
    }
    figure, .container > div {
        width: 90vw;
    } */
}