body {
  background-color: #F6EB34;
  position: relative;
  margin: 0;
  min-height: 100vh;
}
.player {
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  max-width: 43%;
  margin: 0 auto;
}
.player a {
  max-width: 27%;
}
.player a:hover{
  opacity: .8;
}
.details {
  display: block;
  position: absolute;
  top: 7.7vw;
  right: 12.2vw;
  width: 18.7vw;
  text-align: left;
}
.track-art {
  margin: 25px;
  height: 250px;
  width: 250px;
  background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  background-size: cover;
  border-radius: 15%;
}
.now-playing {
  font-size: 1rem;
}
.track-name,
.track-artist {
  font-size: 0.938vw;
  line-height: 1.302vw;
  color: #000000;
  font-family: "hydrophilia-iced", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 0.5vw;

}
.track-artist {
  margin-top: 0.1vw;
}
.buttons {
  display: block;
}
.playpause-track {
  position: absolute;
  left: 8vw;
  top: 6.5vw;
  width: 7.7vw;
  height: 7.7vw;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}
.prev-track {
  position: absolute;
  right: 22.95vw;
  bottom: 5.1vw;
  width: 3.7vw;
  height: 3.7vw;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}
.next-track {
  position: absolute;
  right: 17.8vw;
  bottom: 5.1vw;
  width: 3.7vw;
  height: 3.7vw;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}
.playpause-track img:hover,
.prev-track:hover,
.next-track:hover {
  opacity: 0.5;
}

.slider_container {
  width: 100%;
  max-width: 21.2vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.7vw;
  margin-left: -0.3vw;
}
.seek_slider {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 0.12vw;
  background: #017CAE;
}

.seek_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  width: 0.8vw;
  height: 0.8vw;
  background-color: #000;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

.seek_slider::-moz-range-thumb {
  width: 0.8vw;
  height: 0.8vw;
  background-color: #000;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}



.seek_slider {
  width: 15.2vw;
}
.volume_slider {
  width: 30%;
}
.current-time,
.total-duration {
  padding: 10px;
  display: none;
}
i.fa-volume-down,
i.fa-volume-up {
  padding: 10px;
}
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
  cursor: pointer;
}
.mp3_player_BG {
  width: 56.549vw;
  position: relative;
}
img {
  width: 100%;
  height: auto;
}
i.fa.fa-play-circle.fa-5x,
i.fa.fa-pause-circle.fa-5x,
i.fa.fa-step-backward.fa-2x,
i.fa.fa-step-forward.fa-2x {
  visibility: hidden;
}
.top_black_design {
  width: 7.083vw;
  position: absolute;
  top: 3.438vw;
  left: 2.865vw;
}
.top_black_design:hover{
  opacity: 0.5;
}
.footerCopyrights {
  position: absolute;
  left: 2.865vw;
  bottom: 1.823vw;
}
.copyright-text,
.copyright-links a {
  font-family: 'tex_gyre_heros_cnregular';
  font-weight: 900;
  font-style: normal;
  color: #000000;
  font-size: 0.821vw;
  line-height: 1.338vw;
  letter-spacing: 0.02vw;
  text-transform: capitalize;
  text-align: left;
  text-decoration: none;
}
.copyright-links a:hover{
  opacity: 0.5;
}
.footerCopyrights .separator{
  font-size: 0.9vw;
}

.playerWrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.playerInnerWrapper {
  position: relative;
  max-width: 80%;
  margin: 0 auto;
}
a.closePlayer {
  position: absolute;
  top: 1.3vw;
  width: 1vw;
  height: 1vw;
  left: 1.3vw;
  color: transparent;
  cursor: pointer;
}
.playertitle {
  position: absolute;
  top: 1vw;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3vw;
  text-transform: uppercase;
  font-family: arial;
}
a.play, a.download {
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #656565;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 0.5vw 0;
  border-radius: 8px;
  font-family: arial;
}
a.play:hover, a.download:hover {
  background: #909090;
}
a.play{
  top: 50%;
  

}
a.download {
  top: 65%;
}


@media only screen and (max-width: 1024px) and (orientation: portrait) {
  .top_black_design {
    width: 25.867vw;
    top: 3.2vw;
    left: 3.2vw;
  }
  .mp3_player_BG {
    width: 100vw;
  }
  .playpause-track {
    left: 15.2vw;
    top: 12.1vw;
    width: 12vw;
    height: 12vw;
  }
  .prev-track {
    right: 40.3vw;
    bottom: 8.4vw;
    width: 7vw;
    height: 7vw;
  }
  .next-track {
    right: 31.3vw;
    bottom: 8.4vw;
    width: 7vw;
    height: 7vw;
  }
  .track-name,
  .track-artist {
    font-size: 2.667vw;
    line-height: 3.733vw;
    margin-top: 1.5vw;
  }
  .track-artist {
      margin-top: 0.1vw;
  }
  .details {
    top: 12.7vw;
    right: 22.2vw;
    width: 32.6vw;
  }
  .slider_container {
    display: none;
  }
  .fa-5x {
    font-size: 12vw;
  }
  .footerCopyrights {
      position: absolute;
      left: 3.2vw;
      bottom: 9.333vw;
      width: 65vw;
  }
  .footerCopyrights .separator{
    font-size: 3.3vw;
  }
  .copyright-text, .copyright-links a {  
    font-size: 2.221vw;
    line-height: 3.838vw;  
  }

  .player {
  
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 43%;
    margin: 0 auto;
}
.playerWrapper {
 
  width: 100%;
}
  .player a {
    max-width: 88%;
    margin-bottom: 10%;
}
a.closePlayer {
  position: absolute;
  top: 2.3vw;
  width: 3vw;
  height: 3vw;
  left: 2.3vw;
  color: transparent;
  cursor: pointer;
  margin: 0 !important;
}
a.play, a.download {  
  width: 61%;  
  padding: 1.5vw 0;
  font-size: 4vw;
}
a.play {
  top: 43%;
}
.playerInnerWrapper {
  position: relative;
  max-width: 93%;
  margin: 0 auto;
  height: 100%;
  object-fit: cover;
}
.playertitle {
  position: absolute;
  top: 2.5vw;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.3vw;
  text-transform: uppercase;
  font-family: arial;
}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

  .copyright-text, .copyright-links a {  
    font-size: 3.221vw;
    line-height: 4.838vw;  
  }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape){
  .copyright-text, .copyright-links a {  
    font-size: 1.821vw;
    line-height: 3.338vw; 
  }
  .track-name,
  .track-artist {
    font-size: 1.3vw;   
  }
  .track-artist {
    margin-top: 0.1vw;
  }
}
     
@media (min-width: 1024px) and (max-width: 1366px) and (orientation:portrait) {
  a.closePlayer {
    top: 3.3vw;
    width: 2vw;
    height: 2vw;
    left: 3.3vw;
  }
  .footerCopyrights {
      bottom: 7.333vw;
  }
}