/*
 .player-container {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .player {
	 position: relative;
	 background-color: #ffffff;
	 background-image: url("https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/tim_minchin_piano.jpg");
	 height: 375px;
	 border-radius: 3px;
	 border-bottom: 6px solid #3f51b5;
	 box-shadow: 0 0 20px 3px rgba(0,0,0,0.5);
	 z-index: 1;
}
 .player:hover .mask {
	 background-color: rgba(255,255,255,0.1);
	 transition: all 1s;
}
 .player .like {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 top: 15px;
	 right: 20px;
	 z-index: 15;
	 font-size: 1.5em;
	 vertical-align: middle;
	 line-height: 38px;
	 color: #f2f2f2;
	 border-radius: 50%;
	 text-align: center;
	 cursor: pointer;
}
 .player .icon-heart {
	 display: block;
}
 .player .mask {
	 width: 100%;
	 height: 100%;
	 background-color: rgba(255,255,255,0.2);
	 z-index: 2;
	 transition: all 1s;
}
 .player-info {
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 z-index: 4;
	 list-style: none;
	 color: #262626;
	 transform: scale(1);
}
 .player-info li {
	 margin-bottom: 7px;
}
 .player-info li:nth-child(1) {
	 font-size: 1.5em;
}
 .player-info li:nth-child(2) {
	 font-size: 1.2em;
}
 .player-info li:nth-child(3) {
	 font-size: .9em;
}
 .player .info-two {
	 left: auto;
	 right: 4.5%;
	 z-index: 1;
	 color: #f2f2f2;
}
 .player .info-two li:nth-child(2) {
	 float: right;
}
 .player .info-two li:nth-child(3) {
	 display: inline-block;
	 float: right;
	 clear: both;
}
 .player #play-button {
	 box-sizing: border-box;
	 position: absolute;
	 width: 80px;
	 height: 80px;
	 border-radius: 50%;
	 background-color: #5c6bc0;
	 box-shadow: 0 8px 25px 6px rgba(0,0,0,0.5);
	 right: 40px;
	 bottom: 90px;
	 z-index: 5;
	 cursor: pointer;
	 transition: all 70ms;
	 border: none;
}
 .player #play-button:hover {
	 width: 70px;
	 height: 70px;
	 box-shadow: 0 4px 15px 0 rgba(0,0,0,0.5);
	 right: 45px;
	 bottom: 95px;
	 transition: all 70ms;
}
 .player #play-button .icon-play {
	 position: absolute;
	 font-size: 1.5em;
	 left: 52%;
	 top: 50%;
	 transform: translate(-48%,-50%);
	 transition: all 70ms;
	 color: #ffffff;
}
 .player #play-button:hover .icon-play {
	 font-size: 1.2em;
	 transition: all 70ms;
}
 .player #play-button .icon-cancel {
	 position: absolute;
	 font-size: 1.6em;
	 left: 50%;
	 top: 49%;
	 transform: translate(-50%,-51%);
	 color: #ffffff;
}
 .control-row {
	 position: absolute;
	 bottom: -1px;
	 width: 100%;
	 height: 130px;
	 background-color: #ffffff;
	 overflow: hidden;
	 z-index: 3;
}
 .control-row #pause-button {
	 box-sizing: border-box;
	 position: absolute;
	 width: 80px;
	 height: 80px;
	 border-radius: 50%;
	 background-color: #f2f2f2;
	 left: 40px;
	 bottom: 25px;
	 z-index: 5;
	 cursor: pointer;
	 border: none;
	 transform: scale(0);
	 display: none;
	 animation: scale-animation .4s;
	 animation-fill-mode: forwards;
	 animation-delay: .3s;
}
 .control-row #pause-button .icon-pause {
	 position: absolute;
	 font-size: 1.5em;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%,-50%);
	 transition: all .1s;
	 color: #424242;
}
 .control-row #pause-button .icon-play {
	 position: absolute;
	 font-size: 1.5em;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%,-50%);
	 transition: all .1s;
	 color: #424242;
}
 .control-row .seek-field {
	 bottom: 67px;
	 left: 148px;
	 position: absolute;
	 width: 170px;
	 z-index: 5;
	 transform: scale(0);
	 display: none;
	 animation: scale-animation .4s;
	 animation-fill-mode: forwards;
	 animation-delay: .3s;
}
 .control-row .volume-field {
	 bottom: 67px;
	 right: 127px;
	 position: absolute;
	 width: 50px;
	 z-index: 5;
	 transform: scale(0);
	 display: none;
	 animation: scale-animation .4s;
	 animation-fill-mode: forwards;
	 animation-delay: .3s;
}
 .control-row .volume-icon {
	 width: 20px;
	 height: 20px;
	 position: absolute;
	 border-radius: 50%;
	 bottom: 58px;
	 right: 185px;
	 z-index: 5;
	 font-size: 1.2em;
	 display: none;
	 transform: scale(0);
	 animation: scale-animation .4s;
	 animation-fill-mode: forwards;
	 animation-delay: .3s;
}
 .control-row .volume-icon .icon-volume-up {
	 color: #424242;
}
 .like-active {
	 color: #ef5350;
	 animation: scale-animation .4s;
	 animation-fill-mode: forwards;
}
 @keyframes scale-animation {
	 0% {
		 transform: scale(0);
	}
	 50% {
		 transform: scale(1.2);
	}
	 100% {
		 transform: scale(1);
	}
}
 .waves-animation-one {
	 position: absolute;
	 width: 80px;
	 height: 80px;
	 border-radius: 50%;
	 background-color: #5c6bc0;
	 z-index: 3;
	 left: 42.5%;
	 bottom: 20%;
	 transform: scale(0);
	 animation: waves-animation-one .25s;
	 animation-fill-mode: forwards;
	 animation-delay: .3s;
	 display: none;
}
 @keyframes waves-animation-one {
	 0% {
		 transform: scale(1);
	}
	 99% {
		 transform: scale(7.8);
	}
	 100% {
		 transform: scale(7.8);
	}
}
 .waves-animation-two {
	 position: absolute;
	 width: 80px;
	 height: 80px;
	 border-radius: 50%;
	 background-color: #5c6bc0;
	 z-index: 3;
	 right: 40px;
	 bottom: 35px;
	 transform: scale(7.8);
	 display: none;
	 animation: waves-animation-two .2s;
	 animation-fill-mode: forwards;
}
 @keyframes waves-animation-two {
	 to {
		 transform: scale(0);
	}
}
 .info-active {
	 animation: info-active-animation 3s;
	 animation-fill-mode: forwards;
	 animation-delay: .37s;
}
 @keyframes info-active-animation {
	 to {
		 bottom: 56.5%;
	}
}
 .play-active {
	 animation: play-animation .3s;
	 animation-fill-mode: forwards;
}
 @keyframes play-animation {
	 0% {
		 box-shadow: 0 0 0 0 rgba(0,0,0,0);
	}
	 98% {
		 box-shadow: 0 0 0 0 rgba(0,0,0,0);
		 transform: translate(-200px,65px);
	}
	 99% {
		 box-shadow: 0 0 0 0 rgba(0,0,0,0);
		 transform: translate(-200px,65px) scale(0);
	}
	 100% {
		 box-shadow: 0 0 0 0 rgba(0,0,0,0);
		 transform: translate(0,65px) scale(1);
	}
}
 .play-inactive {
	 animation: play-inactive 1s;
	 animation-fill-mode: forwards;
}
 @keyframes play-inactive {
	 from {
		 transform: translate(0,65px);
	}
}
 input[type="range"] {
	 -webkit-appearance: none;
	 width: 100%;
	 position: absolute;
	 top: 50%;
	 transform: translateY(-50%);
}
 input[type="range"]:focus {
	 outline: none;
}
 input[type="range"] + .thumb {
	 display: none;
}
 input[type="range"]::-webkit-slider-runnable-track {
	 width: 100%;
	 height: 3px;
	 cursor: pointer;
	 animate: 0.2s;
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
	 background: #f2f2f2;
	 border-radius: 0;
	 border: 0px solid #000101;
}
 input[type="range"]::-webkit-slider-thumb {
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
	 border: 0px solid transparent;
	 height: 18px;
	 width: 18px;
	 border-radius: 50%;
	 background: #009688;
	 cursor: pointer;
	 -webkit-appearance: none;
	 margin-top: -7px;
}
 input[type="range"]:focus::-webkit-slider-runnable-track {
	 background: #f2f2f2;
}
 input[type="range"]::-moz-range-track {
	 width: 100%;
	 height: 3px;
	 cursor: pointer;
	 animate: 0.2s;
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
	 background: #f2f2f2;
	 border-radius: 0;
	 border: 0px solid #000101;
}
 input[type="range"]::-moz-range-thumb {
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
	 border: 0px solid transparent;
	 height: 18px;
	 width: 18px;
	 border-radius: 50%;
	 background: #009688;
	 cursor: pointer;
}
 input[type="range"]::-ms-track {
	 width: 100%;
	 height: 3px;
	 cursor: pointer;
	 animate: 0.2s;
	 background: transparent;
	 border-color: transparent;
	 border-width: 39px 0;
	 color: transparent;
	 padding-top: 5px;
}
 input[type="range"]::-ms-fill-lower {
	 background: #f2f2f2;
	 border: 0px solid transparent;
	 border-radius: 0;
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
 input[type="range"]::-ms-fill-upper {
	 background: #f2f2f2;
	 border: 0px solid transparent;
	 border-radius: 0x;
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
 input[type="range"]::-ms-thumb {
	 box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
	 border: 0px solid transparent;
	 height: 18px;
	 width: 18px;
	 border-radius: 50%;
	 background: #009688;
	 cursor: pointer;
	 margin-top: 1px;
}
 input[type="range"]::-ms-tooltip {
	 display: none;
}
 input[type="range"]::-ms-ticks {
	 display: none;
}
 input[type="range"]:focus::-ms-fill-lower {
	 background: #f2f2f2;
}
 input[type="range"]:focus::-ms-fill-upper {
	 background: #f2f2f2;
}*/

.card {
  -webkit-border-radius: 10px;
  color: #212529;
  border-radius: 0px;
}

.card .view {
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}


.audioplayer{
  margin-top: 20px;
}

audio::-webkit-media-controls-panel {
  //background-color: #00000080;
}	

audio{
  width: 100%
}