/*
Theme Name: Influxx Theme
Theme URL: http://www.influxx.com
Description: HTML theme built for use at influxx.com.
Version: 2.1
Author: Adam Mercado
*/

/* colors in site
    Orange ------ f06422
    Dk Orange---- d15203
    Lt Orange---- f87d14
  	Grellow ----- b3c10f
  	Dark Grey --- 24252a
  	Light Grey -- 2e3033
  	Red --------- c10505
  	Dark White -- 7e7e7e
*/


#page {
    width: 1046px;
}

.audio-container {
    width: 100%;
    margin-bottom: 56px;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

#waveform {
    background: rgb(36, 37, 42);
    width: 100%;
    height: 130px;
}

.audio-container .track-name {
    position: absolute;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 300;
    top: 8px;
    left: 8px;
    color: white;
    background: rgba(36, 37, 42, 0.7);
    padding: 8px 32px;
    border-radius: 10px;
}

.audio-container .btn {
    padding: 16px;
    cursor: pointer;
    display: inline-block;
}

.audio-container .buttons {
    background-color: #2e3033;
    overflow: hidden;
}

i {
    font-family: 'Poppins';
    font-size: small;
    font-style: normal;
    color: #7e7e7e;
    margin: 0 12px;
}

i:hover {
    color: #b3c10f
}

.audio-container .volume-slider {
    width: 200px;
    float: right;
    margin: 20px;
}

input {
    -webkit-appearance: none ;
    -moz-appearance: none;
    width: 100%;
    height: 6px;
    outline: none;
    border-radius: 3px;
    background-color: #2e3033;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #24252a;
    border: 1px solid #b3c10f;
}

.audio-container .buttons .play-btn.playing .pause-state {
    display: inline-block;
}

.audio-container .buttons .play-btn.playing .play-state {
    display: none;
}

.audio-container .buttons .play-btn .pause-state {
    display: none;
}

.audio-container .buttons .mute-btn .unmute-state {
    display: none;
}

.audio-container .buttons .mute-btn.muted .unmute-state {
    display: inline-block;
}

.audio-container .buttons .mute-btn.muted .mute-state {
    display: none;
}

.a-p-details {
    /* margin-bottom: 52px; */
    margin-bottom: 2.8rem;
    width: 70%;
}

.a-p-details p {
    line-height: 1.6;
    margin-bottom: 1em;
}