@import url(/css/everypage.css);
/*
    Hero
*/
.hero {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    position:relative;
    height:calc(100vh - 100px);
    width:100%;    
    padding:86px 0 0 0;
    min-height:450px;
    max-height:500px;
}
@media(min-width:700px) {
    .hero {
        align-items: flex-start;
        height: 100vh;
        min-height: 750px;
        max-height: 800px;
    }
}
@media(min-width:1000px) {
    .hero {
        align-items:flex-start;
        height:100vh;
        min-height:500px;
        max-height:1000px;
    }
}

.hero-image {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position:center center;
    z-index:1;
    opacity:0;
    transition:.75s opacity ease-in-out;    
}
.hero-image.active {
    z-index: 2;
    opacity: 1;
    transition: .5s opacity ease-in-out;
} 
.hero .logo {
    position:relative;
    z-index:4;
    opacity:1;
    transition:.5s opacity ease-in-out;
    margin-bottom:3em;
    display:none;
}
@media(min-width:700px) {
    .hero .logo {
        display:block;
    }
}
.hero .logo.hide {
    opacity: 0;
    transition: .5s opacity ease-in-out;
}
.hero .audio-player {
    z-index:4;
    position:relative;
    overflow:hidden;
}
.hero .audio-player {
    color: #fff;
    border: 2px solid #fff;
    border-radius: 15px;
    width: 320px;
    max-width: 100%;
    padding: 1em;
    background-color: rgba(0,0,0,.25);
}
.hero .playlist {
    max-height: 260px;
    overflow-y: auto;
    width: 120%;
    padding-right: 20%;
}

.hero .playlist li {
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: .25s background-color ease-in-out;
    background-color: transparent;
}

.hero .playlist li:hover {
    background-color: rgba(255,255,255,.25);
    transition: .25s background-color ease-in-out;
}

.hero .playlist i {
    width: 25px;
    display: block;
}

.hero .playlist li > i:first-child {
    margin-right: 1em;
}

.hero .playlist span {
    width: calc(100% - 50px);
    font-weight: 700;
    font-family: var(--heading-font);
    line-height: 1.5em;
}

.hero .playlist a {
    color: rgba(255,255,255,.5);
}

.hero .playlist li i, .playlist li a {
    opacity: 0;
}

.hero .playlist .currently-playing i, .playlist .currently-playing a {
    opacity: 1;
    display: block;
}

/*
    Orange Banner
*/
.orange-banner {
    text-align:center;
    color:#fff;
}
.orange-banner h2 {
    margin:0 0 1em 0;
    padding:0;
}
.orange-banner .sub-nav {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
@media(max-width:425px) {
    .orange-banner .sub-nav li, .orange-banner .sub-nav a {
        min-width: 100%;
        display: block;
    }
}
/*
    Radio Imaging Section
*/
.radio-imaging {
    background-size: cover;
    background-position: center;
}
.radio-imaging .contained {
    display:flex;
    justify-content:space-between;
    flex-direction:column;
}
.radio-imaging .contained > div {
    width: 100%;
    color: #fff;
    padding: 0 1em;
}
@media(min-width:800px) {
    .radio-imaging .contained {        
        flex-direction:row;
    }
    .radio-imaging .contained > div {
        width: 50%;
        color: #fff;
        padding: 0 3em;
    }
}

.radio-imaging h2 {
    margin-bottom:1em;
}

.radio-imaging .audio-player ul {
    width:100%;
}
.radio-imaging .audio-player li {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.4rem;
    line-height:2em;
    border-bottom:1px solid rgba(255,255,255,.5);
    padding:0 1em;
    cursor:pointer;
}
.radio-imaging .audio-player li.currently-playing {
    background-color:rgba(0,0,0,.15);
}
.radio-imaging .audio-player li i {
    opacity:0;
}
.radio-imaging .audio-player li.currently-playing i {
    opacity: 1;
}
.radio-imaging .audio-player li a {
    color:#fff;
}
.radio-imaging .audio-player li:last-child {
    border:none;
}
.radio-imaging .audio-player li span {
    width:100%;
    font-weight:700;
    margin-left:1em;
}

/*
    Audio Players
*/
.audio-player .btns {
    display:flex;
    justify-content:space-between;
    align-items:center;    
}
.audio-player .btns i {
    cursor: pointer;
    padding: .25em;
    display: block;
    transition: .25s background-color ease-in-out;
    background-color:transparent;
}
.audio-player .btns i:hover {
    background-color:rgba(255,255,255,.15);
    transition:.25s background-color ease-in-out;
}
.audio-player .btns i:focus {
    outline:1px solid #ccc;
}
.audio-player .volume-bar, .audio-player .progress-container {
    width:50px;
    height:8px;    
    background-color:rgba(100,100,100,.5);
    position:relative;        
}
.audio-player .progress-container {
    width: 100%;
}
.audio-player .current-bar {
    background-color:#fff;
    height:8px;    
    z-index:1;
    width:0;
}
.audio-player .volume-bar .current-bar {
    width: 50%;
}
.audio-player .volume-bar.muted .current-bar {
    background-color: transparent;
    height: 8px;
    width: 50%;
    z-index: 1;
}
.audio-player input[type=range] {
    z-index: 2;
    position: absolute;
    -webkit-appearance: none; /* Override default CSS styles */
    width: 100%;
    appearance: none;
    top: 0;
    left: 0;
    height: 8px; /* Specified height */
    background: transparent; /* Grey background */
    outline: none; /* Remove outline */
    cursor: pointer;
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    opacity:0;
}
.audio-player input[type=range]:focus {
    outline:1px solid #ccc;
}
.audio-player input[type=range]::-webkit-slider-thumb, .audio-player input[type=range]::-moz-range-thumb {
    height: 0;
    width: 0;
    background-color: #fff;
    border: none;
    outline: none;
    appearance: none;
    background-color:transparent;
    -webkit-appearance: none;

}
.audio-player .timer {
    display:flex;    
    font-size:.8rem;
}
.audio-player .mute-toggle {
    opacity:.5;
    min-width:16px;
    display:block;
}
.audio-player .mute-toggle.muted {
    opacity: 1;
}
.progress-container {
    width:100%;
    margin:.5em 0;    
    position:relative;
    height:8px;    
}
i.hidden {
    display:none !important;
}
.info {
    border-bottom:2px solid rgba(255,255,255,.25);
    padding-bottom:.5em;
    margin-bottom:.5em;
}
.playlist li a {
    display: none;
}
.playlist li:focus {
    background-color: rgba(255,255,255,.25);
    transition: .25s background-color ease-in-out;
}