/*
001 hic et punk audio — RGB-Side (A) by Man Bastion

This Interactive Audio OBJKT was made by @hicetpunk, adapted from the Hic et Nunc HTML Audio Player HTML Template by @cryptemes, with a custom design added by @hicetpunk.
Music by Joshua Fry as Man Bastion. All rights reserved.

If you want to make your own audio player please do not copy this one but go to the open source customisable objkt #25359

Copyright April 2021 - twitter.com/hicetpunk
*/

*:not(.ui-slider-range) {
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    box-sizing: border-box;
    
}
body {
    background-color: black;
    font-family: georgia;
    color: white;
    text-shadow: 0.15em 0.15em 0 hsla(0, 0.00%, 0.00%, 1.00);
}

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 767px) {
body {
    font-size: 2.8vw;
  }
}

.CRY_container {
    margin: 0px;
}
.CRY_player {
    background: url("Cover.jpg") no-repeat #111111;
    background-size: contain;
    
    position: relative;
    
    z-index: 2;
    display: block;
    overflow: hidden;
    height:100vmin;
    width:100vmin;
    max-width:768px;
    max-height:768px;
    
}
.BG{
    height:100vmin;
    width:100vmin;
    max-width:768px;
    max-height:768px;
    z-index: 0;
    position: absolute;
}
.UIshade{
    display: block;
    position: absolute;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
    width:100vw;
    height:26%;
    bottom:0px;
}

.title {
    color: #FFFFFF;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.titlewrap {
    display: flex;
    justify-content: space-between;
    margin-bottom:1.5%;
}

.worknumber {
    padding-left: 4%;
    padding-top: 3%;
    font-weight: bold;
    font-size: 1.1em;
    position: absolute;
    opacity: 0%;
}

.pl {
    background: transparent url("PlaylistOpen.svg") no-repeat;
    cursor: pointer;
    height: 25px;
    right: 25px;
    position: absolute;
    top: 50px;
    width: 25px;
}
.plc {
    background: transparent url("PlaylistClose.svg") no-repeat;
    cursor: pointer;
    height: 25px;
    right: 25px;
    position: absolute;
    top: 22px;
    width: 25px;
}

.CRY_controls {
    cursor: pointer;
    height: 12%;
    left: 50%;
    position: absolute;
    bottom: 12%;
    width: 35%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: safe;
}

.CRY_controls .play, .CRY_controls .pause, .CRY_controls .rew, .CRY_controls .fwd {
    float: left;
    height: 100%;
    width: 33%;
}

.CRY_controls .play:hover, .CRY_controls .pause:hover, .CRY_controls .rew:hover, .CRY_controls .fwd:hover {
    opacity: 60%;
}


.CRY_controls .play {
    background: url("Play.svg") no-repeat center;
    background-size: 70% 70%;
}
.CRY_controls .pause {
    background: url("Pause.svg") no-repeat center;
    background-size: 80% 80%;
    display: none;
}
.CRY_controls .rew {
    background: url("Back.svg") no-repeat center;
    background-size: 50% 50%;
}
.CRY_controls .fwd {
    background: url("Forth.svg") no-repeat center;
    background-size: 50% 50%;
}
.hidden {
    display: none;
}
.CRY_controls .visible {
    display: block;
}

.copyright{
    font-size: 0.6em;
    text-align: center;
    margin-top: 2.4%;
    opacity: 40%;
    text-shadow: 0.1em 0.1em 0 hsla(0, 0.00%, 0.00%, 1.00);
}

.assofwindow {
  height: 12%;
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  padding-right: 4%;
  padding-left: 4%;
}

.timeline{
    width:100%;
    height:15%;
    left: 5%;
}
.playhead {
    height: 14px;
    bottom: 0px;  
    cursor: pointer;
}
.ui-slider {
    height:100%;
    background-color: #00000080;
    text-decoration:none;
    text-align:center;
    border-radius: 0px;
    border:none !important;
}
.ui-slider-handle {
    background: url("Timeline_Status.svg") no-repeat !important;
    height: 14px;
    width: 14px;
    bottom: 22px; 
    text-decoration:none;
    border:none !important;
    display:none;
}

.showpl{
    right:0px !important;
}

li{
    height: 100%;
    width: 100%;
    background-image: url("track-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

li:hover{
    background-image: url("track-bg-hover.png");
}

.trackname{
    padding-left: 7%;
    padding-top: 56%;
}


.playlist {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding-bottom: 10px;
    padding-top: 9%;
    position: absolute;
    width: 100%;
    z-index: 99;
    height: 74%;
}
.plul{
    display: grid;
    width: 60%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px 40px;
    grid-template-areas:
    ". ."
    ". .";
    list-style-type: none;
}
.plul li {
    
    cursor: pointer;
}

.plul li.active {
    background-image: url("track-bg-active.png");
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}