body {
    margin: 0;
    /*background: #282828;*/
}
@charset "UTF-8";

@font-face {
	/* Entypo pictograms by Daniel Bruce — www.entypo.com */
	font-family: 'entypo';
	src: url("font/entypo.eot");
	src: url("font/entypo.eot#iefix") format('embedded-opentype'),
		url("data:font/woff;base64,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") format('woff'),
		url("font/entypo.ttf") format('truetype'),
		url("font/entypo.svg#entypo") format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Codystar';
	src: url("../fonts/Codystar-Regular.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}

.jp-audio {
	/*border-radius: 7px;*/
    /*background-color: rgba(255,255,255, 0.2);*/
	position: relative;
	width: 100%;
	/*height: 90px;*/
	font-family: 'Source Sans Pro', sans-serif;
	/*font-size: 16px;*/
	/*line-height: 64px;*/
	/*text-align: left;*/
	margin: 0;
	padding: 0;

	/* Hide iOS touch highlight */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Disable selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* define your text color here */
	/*color: #ffffff;*/
}

.title{
	/*background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.54) 20%, rgba(0,0,0,0.81) 62%, rgba(0,0,0,1) 100%);*/
	font-family: Codystar, sans-serif;
	flex: 1;
	font-size: 25px;
	color: #3cb17b;
	text-shadow: 0 0 0 #3cb17b;
	/*top: 4px;*/
    position: relative;
}

.jp-controls {
	width: 90px;
	height: 90px;
	border: 2px solid #3c3c3b;
    /*position: absolute;*/
    /*top:0;*/
    /*left: 0;*/
    /*
	float: left;
    border-radius: 7px;
	width: 32px;
	height: 100%;

*/
	/* define your pause/play button background color here */
	/*background-color: #c7c7c7;*/
    /*border-right:solid 1px black;*/
}

.jp-circle{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90px;
	border-radius: 50%;
	border: 2px solid #3c3c3b;
	margin: -2px;

}

.jp-play,
.jp-pause {

	text-decoration: none;
	font-size: 30px;
	text-align: center;
	cursor: pointer;

	/* define your pause/play button icon color here */
	color: rgba(255,255,255, 0.4);
}

.jp-pause {
	display: none;
}

.jp-pause:before,
.jp-play:before {
	display: inline-block;

	font-family: 'entypo';
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	font-variant: normal;
	text-transform: none;
	speak: none;

	width: 32px;
	line-height: 95px;

	text-align: center;
	opacity: 1.0;
}

.jp-pause:before {
	/*content: '\2016';*/
}
.jp-play:before {
	/*content: '\25b6';*/
}
.jp-play {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/play-g.png) no-repeat 58% center;
	background-size: 50%;
}
.jp-state-playing .jp-play {
	background: url(../img/pause-g.png) no-repeat 52% center;
	background-size: 46%;
}

.jp-bar {
	flex: 1;
	border: 2px solid #3c3c3b;
	border-left: none;
	background: no-repeat center center;
	background-size: 100% 98%;
	/*background-attachment: fixed;*/
	/*background-size: cover;*/
	/*border-radius: 7px;*/
	/*position: absolute;*/
	position: relative;
	/*top: 0;*/
	/*left: 32px;*/
	/*width: 97%;*/
	height: 90px;
	margin: 0;
	padding: 0;

	/* define your unplayed progress bar background color here */
	/*background-color: #ccc;*/
}

.active-waveform{
	border-bottom: 3px solid transparent;
	position: absolute;
	background: no-repeat center center;
	background-size: 100% 98%;
	width: 100%;
	height: 90px;
}
.active-waveform.active-waveform_yellow{
	animation: opacity 1.5s infinite alternate;
	opacity: 1;
}
.active-waveform.active-waveform_blue{
	filter: hue-rotate(110deg);
	opacity: .6;
}

@keyframes opacity {
	0%  {opacity: 1;}
	100% {opacity: 0;}
}

.jp-seek-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
}

.jp-play-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	margin: 0;
	padding: 0;

	/* define your played progress bar background color here */
	background-color: rgb(72, 72, 72);
	transition: width .3s;
}

.jp_info{
	/*position: absolute;*/
	/*top: -22px;*/
	/*right: 430px;*/
	/*color: black;*/
	/*margin: 0 -15px;*/
	height: 30px;
	position: relative;
	display: flex;
	align-items: center;
}

.jp-duration {
    font-family: Arial, Verdana, sans-serif;
    font-size: 11px;
    padding-left:10px;
	position: absolute;
    color: black;
    line-height:22px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

div.jp-current-time,
div.jp-duration, div.jp-time-break {
 	font-family: Codystar, sans-serif;
    line-height:22px;
    position:absolute;
    left:290px;
	color: white;
	font-size: 13px;
}

div.jp-time-break{
    position: absolute;
    left: 295px;
}
div.jp-current-time {
	/*position: absolute;*/
	/*left: 283px;*/
	/*top: -2px;*/
	position: static;
	width: 30px;
	margin: 0 10px;
}

.jp-no-solution {
	position: absolute;
	top: 0;
	left: 64px;
	width: 316px;
	height: 48px;
	margin: 0;
	padding: 8px 0;

	line-height: 24px;
	font-size: 16px;
	text-align: center;
	display: none;

	/* define your error message text color here */
	color: #000000;

	/* define your error message background color here */
	background-color: #b28282;
}

/* @group volume controls */

div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
	margin-left: 210px;
}
div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
	margin-left: 154px;
}

div.jp-audio-stream div.jp-type-single a.jp-mute,
div.jp-audio-stream div.jp-type-single a.jp-unmute {
	margin-left:10px;
}

div.jp-audio a.jp-volume-max,
div.jp-audio-stream a.jp-volume-max {
	margin-left: 56px;
}

div.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	background-color:rgba(255,255,255, 0.2);
	width:100px;
	height:5px;
	cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
	/*top:6px;*/
	/*left:332px;*/
	position: relative;
	margin: 0 10px;
}
div.jp-audio-stream div.jp-volume-bar {
	top:37px;
	left:92px;
}
div.jp-video div.jp-volume-bar {
	top:17px;
	left:72px;
}
div.jp-volume-bar-value {
	/*background-color: #8bb9b9;*/
	width:0;
	height:10px;
	background: #00ff00;
	box-shadow: 0 -100px 100px -120px #00ff00 inset;
	/*animation: background 5s infinite alternate;*/
}

.hiding { text-overflow:ellipsis; }


@keyframes background {
  50% {
    background: #77003c;
    box-shadow: 0 -100px 100px -100px #77003c inset;
  }
}

@media (max-width: 575px){
	div.jp-current-time{
		font-size: 11px;
		margin: 0 2px 0 5px;
	}
	div.jp-audio div.jp-volume-bar{
		margin: 0 10px 0 0;
		width: 60px;
	}
	.jp-controls{
		width: 70px;
		height: 70px;
	}
	.jp-circle, .jp-bar, .active-waveform{
		height: 70px;
	}
}

@media (max-width: 998px) and (orientation: landscape){
	.jp-controls{
		width: 40px;
		height: 40px;
		border: 1px solid #3c3c3b;
	}
	.jp-circle{
		height: 40px;
		border: 1px solid #3c3c3b;
		margin: -1px;
	}
	.jp-bar, .active-waveform{
		height: 40px;
		background-size: 100% 97%;
	}
	.jp-bar{
		border: 1px solid #3c3c3b;
	}
	.jp_info{
		height: 18px;
	}
	.title{
		font-size: 17px;
	}
	div.jp-volume-bar{
		width: 55px;
		height: 3px;
		margin: 0px 6px;
	}
	div.jp-current-time, div.jp-duration, div.jp-time-break{
		font-size: 11px;
		margin: 0px 0px;
	}
}