body, 
html{
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  position: relative;
  z-index: 0;
  width: auto;
    align-content: center;
  height: 490px
    border: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgba(215, 243, 246, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -khtml-user-select: none;
}



#status {
  width: 50px;
  height: 30px;
  position: fixed;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  margin: -25px 0 0 -15px;
  /* is width and height divided by two */
}

.spinner {
  margin: 0px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.player {
  position:relative;
  z-index: 5;
  width: 300px;
  height: auto;
    margin: 16px 16px 16px 16px;
  padding: 18px 0;
}


.player_body {
  position: relative;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: auto;
  height: 490px;
  margin: 16px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);
}

@media only screen and (max-device-width: 568px) {
    html {
        width: 100%;
        margin: 0;
    }
    .sound {
        opacity: .5;
        pointer-events: none
    }
}


.waves {
  position: relative;
  z-index: 20;
  top: -220px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.waves.waves_up {
  top: -430px;
}

.player_content {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 490px;
}

.player_header {
  position: relative;
  z-index: 55;
  padding: 18px 0;
  color: rgba(0, 178, 250, 1);
  background-color: rgba(255, 255, 255, 1);
}

.header_name {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}


/* Hamburger menu */

.hamburger-menu,
.back_btn,
.nav_menu {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hamburger-menu {
  position: absolute;
  z-index: 70;
  top: 18px;
  right: 16px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.hamburger-menu.slide {
  margin-right: 232px;
}

.back_btn.slide {
  margin-left: -232px;
}

.nav_menu {
  position: absolute;
  z-index: 70;
  right: -235px;
  width: 235px;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.nav_list {
  position: relative;
}

.nav_item {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.nav_item p {
  font-size: 14px;
  font-weight: 300;
  margin: -1px 0;
  color: rgba(0, 0, 0, .9);
}

.nav_item a {
  font-size: 22px;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
}

.nav_menu.open {
  right: 0;
}

.player_fade {
  -webkit-transition: background .2s ease-in-out;
  transition: background .2s ease-in-out;
  background: rgba(0, 0, 0, 0);
}
 
.player_fade.player_fade_on {
  position: absolute;
  z-index: 65;
  width: 275px;
  height: 490px; 
  background: rgba(0, 0, 0, .3);
}

.bar,
.bar:after,
.bar:before {
  width: 15px;
  height: 3px;
}

.bar {
  position: relative;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background: rgba(0, 178, 250, 1);
}

.bar.animate {
  background: rgba(0, 178, 250, 0);
}

.bar:before {
  position: absolute;
  bottom: 6px;
  left: 0;
  content: '';
  -webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar:after {
  position: absolute;
  top: 6px;
  left: 0;
  content: '';
  -webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar.animate:after {
  top: 0;
  -webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bar.animate:before {
  bottom: 0;
  -webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  ;
}


/* ------------------------------------- */

.player_playlist {
  position: absolute;
  z-index: 60;
  top: 490px;
  overflow: scroll;
  overflow-x: hidden;
  width: 275px;
  height: 305px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
  background-color: rgba(255, 255, 255, 1);
}

.player_playlist::-webkit-scrollbar {
  width: 5px !important;
}

.player_playlist::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .1) !important;
}

.player_playlist::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .3) !important;
}

.player_playlist_list {
  position: relative;
}


/*  */

.player_playlist_item {
  width: 100%;
  padding: 4px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.player_playlist_item:hover {
  background: #e6e6e6;
}

.player_playlist_item:active {
  background: #d2d2d2;
}

.player_playlist_item.active {
  border-bottom-color: #7d7d7d;
  background: #7d7d7d;
}

.player_playlist_item.active * {
  color: #fff;
}

.song_block {
  display: inline-block;
}

.song block h6 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}

.song_block p {
  font-size: 11px;
  color: rgba(144, 144, 144, 1);
}

.song_time {
  font-size: 11px;
  position: relative;
  top: 20px;
  float: right;
  color: rgba(144, 144, 144, 1);
}

.glyphicon-menu-left {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.glyphicon-menu-left.back_btn_on {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.player_playlist.playlist_on {
  top: 185px;
}

.album_wrap {
  position: relative;
  z-index: 40;
  top: 0;
  padding: 18px 0 30px 0;
  -webkit-transition: top .3s ease-in-out;
  transition: top .3s ease-in-out;
}

.album_wrap.album_up {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.jAudio--thumb {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: background-image .2s ease-in-out;
  transition: background-image .2s ease-in-out;
}

.no_album_img {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  background: url(https://kgmglobal.org/images/LOGO.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);
}

.song_playing {
  height: 113px;
  font-size: 14.5px;
  line-height: 135%;
  position: relative;
  top: 0;
  padding: 6px 0 69px 0;
  -webkit-transition: top .5s ease-in-out;
  transition: top .5s ease-in-out;
}

.song_playing.song_playing_up {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.song_name {
  font-weight: 500;
}

.artist_name {
  font-size: 10.5px;
  color: rgba(144, 144, 144, 1);
}

.timeline_wrap {
  position: relative;
  position: relative;
  top: 0;
  margin-top: 5px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.line_played {
  position: absolute;
  top: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 1);
}

.line_preload {
  position: absolute;
  top: 4px;
  height: 2px;
  background-color: rgb(0, 129, 181);
}

.line_preload.line_preload_up {
  background-color: rgba(0, 0, 0, 0.15);
}

.progress-bar-wrapper {
  width: 100%;
  height: 10px;
  cursor: pointer;
}

.full_line {
  position: absolute;
  top: 4px;
  width: 100%;
  height: 2px;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
  background-color: rgba(255, 255, 255, .4);
}

.progress-bar-pointer {
  position: absolute;
  top: 0;
  right: -1px;
  width: 0;
  height: 0;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  border-radius: 50%;
  background: #fff;
}

.progress-bar-wrapper:hover .progress-bar-pointer {
  top: -3px;
  right: -5px;
  width: 10px;
  height: 10px;
}

.progress-bar-pointer.progress-bar-pointer_up {
  background: rgba(0, 178, 250, 1);
}

.time_of_song {
  font-size: 9px;
  padding-top: 7px;
  -webkit-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.player_btns {
  position: relative;
  z-index: 1;
  top: -5px;
  left: 14px;
  width: 270px;
  padding-top: 33px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.play_btn {
  position: absolute;
  top: -16px;
  left: 8px;
  width: 51px;
  height: 51px;
  color: rgba(0, 178, 250, 1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

.timeline_wrap.timeline_wrap_up,
.player_btns.player_btns_up {
  top: -305px;
  color: rgba(0, 0, 0, 1);
}

.line_played.line_played_up {
  top: 3px;
  background-color: rgba(0, 178, 250, 1);
}

.full_line.full_line_up {
  background-color: rgba(0, 178, 250, .4);
}

.time_of_song.time_of_song_up {
  color: rgba(0, 178, 250, 1);
}

#play_circle {
  top: 17px;
  left: 1px;
}

.back_btn:hover {
  cursor: pointer;
}

.random_btn:hover,
.prev_btn:hover,
.next_btn:hover,
.repeat_btn:hover {
  cursor: pointer;
  color: rgba(0, 47, 62, 1);
}

.play_btn:hover {
  cursor: pointer;
  background-color: rgba(0, 47, 62, 1);
}

.random_btn_on,
.repeat_btn_on {
  color: rgba(0, 47, 62, 1);
}

.touch-screen .menu_btn:hover,
.touch-screen .random_btn:hover,
.touch-screen .prev_btn:hover,
.touch-screen .next_btn:hover,
.touch-screen .repeat_btn:hover {
  color: #fff;
}

.touch-screen .play_btn:hover {
  background-color: #fff;
}

.player .pl-list__eq {
	display: none;
}

.player .pl-list--current {
	background: #1ec279;
	color: #fff;
}

.player .pl-list--current .pl-list__eq {
	display: block;
}

@keyframes eq {
	0% {
		height: 3px;
	}

	50% {
		height: 15px;
	}

	100% {
		height: 3px;
	}
}

.player .eq {
	display: flex;
	width: 20px;
	height: 15px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: flex-end;
}

.player .eq__bar {
	width: 4px;
	background: #fff;
	filter: drop-shadow(0 0 5px #fff);
}

.player .eq__bar:nth-child(2) {
	animation: eq 1.2s ease-in-out infinite 0s;
}

.player .eq__bar:nth-child(4) {
	animation: eq 1.2s ease-in-out infinite .2s;
}

.player .eq__bar:nth-child(1) {
	animation: eq 1.2s ease-in-out infinite .4s;
}

.player .eq__bar:nth-child(3) {
	animation: eq 1.2s ease-in-out infinite .6s;
}