/* Font Family
================================================== */

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


/* Audio Player Styles
================================================== */

audio {
    margin:0 15px 0 14px;
    width:800px;
}

.current-track__actions{
    max-height:33px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.current-track__progress {
    width: 100%;
    color: #aaaaaa;
    font-size: 11px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.current-track__footer{
    display:inline-flex;
    max-height:100px;
    width: 100%;
    padding: 8px 0;
}

.current-track__controls{
    width: 85%;
    padding: 0 50px;
}
.current-track__information{
    display:inline-block;
    width:15%;
    margin:auto;
    padding: 0 0 0 15px;
}

.playing {
    background: #282828;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.playing__art img {
    width: 50px;
    height: 50px;
}
.playing__song {
    color: #aaaaaa;
    padding-left: 15px;
    display: flex;
    flex-flow: column wrap;
}
.playing__song a {
    color: #aaaaaa;
}
.playing__song a:hover {
    color: white;
    cursor: pointer;
}
.playing__add {
    margin-left: auto;
    padding-right: 15px;
    color: #aaaaaa;
}

@media (max-width: 768px) {
    .playing {
        border-top: 1px solid #181818;
    }
}

.current-track__actions {
    width: 5%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.current-track__actions a {
    font-size: 24px;
    color: #c8c8c8;
}
.current-track__actions a:hover {
    color: white;
    cursor: pointer;
}
.current-track__actions .play {
    font-size: 36px;
}

@media (max-width: 1400px) {
    .current-track__actions {
        width: 10%;
    }
    .current-track__progress {
        width: 50%;
    }
    .current-track__options {
        width: 40%;
    }
}
@media (max-width: 980px) {
    .current-track__actions {
        width: 10%;
    }
    .current-track__progress {
        width: 40%;
    }
    .current-track__options {
        width: 50%;
    }
}
@media (max-width: 768px) {
    .current-track__actions {
        width: 25%;
    }
    .current-track__progress {
        width: 75%;
    }
    .current-track__options {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .current-track__actions {
        width: 100%;
        justify-content: space-around;
        padding: 5px 0;
    }
    .current-track__progress {
        width: 100%;
        padding: 5px 0;
    }
    .current-track__options {
        width: 100%;
        padding: 5px 0;
    }
}
@media (max-width: 768px) {
    .current-track__actions {
        padding-top: 15px;
    }
}


/* Plyr Overrides
================================================== */
.plyr{
    width:100%;
    !important;
}

.plyr__progress{
    margin-left: 15px;
    margin-right:30px;
    !important;
}

.plyr__time--duration{
    margin-right:10px;
}

.plyr__controls {
    background-color: #0665a2;
    padding: 0;
    width:100%;
    display:block;
    margin-left: auto;
    margin-right:auto;
}

.plyr__controls .plyr__menu:first-child, .plyr__controls .plyr__menu:first-child + [data-plyr="pause"], .plyr__controls .plyr__progress:first-child, .plyr__controls .plyr__progress:first-child + [data-plyr="pause"], .plyr__controls .plyr__time:first-child, .plyr__controls .plyr__time:first-child + [data-plyr="pause"], .plyr__controls > .plyr__control:first-child, .plyr__controls > .plyr__control:first-child + [data-plyr="pause"]{
    margin-right:0;
}

.plyr--audio .plyr__controls {
    background-color:transparent;
    border:none;
    color:#fff;
    width:100%;
}

.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr--audio .plyr__controls button:hover,
.plyr__play-large {
    background:rgba(0,0,0,.1);
}

.plyr__progress--played,
.plyr__volume--display {
    color:rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
    background:rgba(0,0,0,.1);
}

.plyr__progress:hover + .plyr--full-ui input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: pointer;
    background: #cbcbcb;
}

.plyr--full-ui input[type='range']::-moz-range-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: pointer;
    background: #cbcbcb;
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .plyr--full-ui input[type='range']::-webkit-slider-runnable-track {
        height: 5px;
        -webkit-appearance: none;
        color: #6ef77c;
        margin-top: -1px;
    }
}
/** FF*/
.plyr--full-ui input[type="range"]::-moz-range-progress {
    background-color: #6ef77c;
}
.plyr--full-ui input[type="range"]::-moz-range-track {
    background-color: #879095;
}
/* IE*/
.plyr--full-ui input[type="range"]::-ms-fill-lower {
    background-color: #6ef77c;
}
.plyr--full-ui input[type="range"]::-ms-fill-upper {
    background-color: #879095;
}

.plyr--full-ui input::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}



.plyr--audio .plyr__progress--buffer {
    color:rgba(0,0,0,.1);
}


/* Media Queries
================================================== */

@media only screen and (max-width:850px) {
    #nowPlay { display:none; }
}