/*
* import font for counter (number)
*/

@import '"http://fonts.googleapis.com/css?family=Open+Sans:regular';

.mejs-audio,
.mejs-audio * {
	margin: 0;
	padding: 0;
	outline: none !important;
}

.mejs-container {
	position: relative;
	height: 85px !important;
	width: 100% !important;
}

.mejs-inner {
	position: relative;
	height: 100%;
}

.mejs-controls {
	position: relative;
	background: #636363;
	height: 100%;
	display: flex;
	border-radius: 5px;
}

.mejs-button {
	position: relative;
}

.mejs-button button {
	background: #636363;
	border: none;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.mejs-playpause-button button {
	border-radius: 5px 0 0 0;
}

.mejs-volume-button button {
	border-radius: 0 5px 0 0;
}


/*///////////////////////////////////////
* Style button icon
///////////////////////////////////////*/

.mejs-button {
	transition: all 0.3s ease-in;
}

.mejs-button.mejs-play:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(icon/bplay.svg) no-repeat;
	top: 0;
	left: 5px;
	bottom: 30px;
	right: 0;
	margin: auto;
	pointer-events: none;
	transition: all 0.1s ease-in;
}

.mejs-button.mejs-pause:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(icon/bpause.svg) no-repeat;
	top: 0;
	left: 7px;
	bottom: 30px;
	right: 0;
	margin: auto;
	pointer-events: none;
	transition: all 0.1s ease-in;
}

.mejs-button.mejs-mute:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(icon/bunmute.svg) no-repeat;
	top: 0;
	left: 0;
	bottom: 30px;
	right: 0;
	margin: auto;
	pointer-events: none;
	transition: all 0.1s ease-in;
}

.mejs-button.mejs-unmute:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url(icon/bmute.svg) no-repeat;
	top: 0;
	left: 0;
	bottom: 30px;
	right: 0;
	margin: auto;
	pointer-events: none;
	transition: all 0.1s ease-in;
}


/*/////////////////////////////////////*/


/*///////////////////////////////////////
* Loading bar style
///////////////////////////////////////*/

.mejs-time-rail {
	width: 100% !important;
}

.mejs-time-total {
	position: relative;
	width: 100% !important;
	height: 45px;
	display: block;
	background: #1f1f1f;
	margin-top: 5px;
}

.mejs-time-total > span,
.mejs-time-total > a {
	position: absolute;
	display: block;
	width: 180px;
	height: 100%;
	cursor: pointer;
}

.mejs-time-loaded {
	background: #3c3838;
	background: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
	background: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	background-size: 50px 50px;
	animation: move 3s linear infinite;
	opacity: 0.2;
}

.mejs-time-current {
	background: #ffff00;
	background: linear-gradient(to left, #ffff00, #272727);
	background: -moz-linear-gradient(to left, #ffff00, #272727);
	background: -webkit-linear-gradient(to left, #ffff00, #272727);
}

.mejs-time-handle {
	display: none !important;
}


/*/////////////////////////////////////*/

.mejs-time-total .mejs-time-float {
	position: absolute;
	display: none;
	width: 85px;
	height: 25px;
	margin-left: -43px;
	top: -35px;
	color: #fff;
	font-family: 'Open Sans';
	font-size: 20px;
	text-align: center;
}

.mejs-time-float-current {
	background: #636363;
	display: block;
	line-height: 25px;
	left: calc(50% - 100px);
	border-radius: 3px;
	text-align: center;
}

.mejs-time-float-corner {
	position: absolute;
	border: solid 5px transparent;
	border-top-color: #636363;
	top: 25px;
	left: 37px;
}

.mejs-time {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	background: #636363;
	color: #fff;
	font-family: 'Open Sans';
	font-size: 20px;
	padding: 0 60px;
	border-radius: 0 0 5px 5px;
	box-sizing: border-box;
}

.mejs-time span:nth-child(2) {
	display: none;
}

.mejs-currenttime {
	float: left;
}

.mejs-duration {
	float: right;
}

.mejs-offscreen {
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute!important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}


/*///////////////////////////////////////
* Volume slider
///////////////////////////////////////*/

.mejs-horizontal-volume-slider {
	position: absolute;
	width: 50px;
	height: 150px;
	background: #636363;
	right: 0;
	top: -145px;
	box-sizing: border-box;
	border-radius: 5px 5px 0 0;
	display: none;
}

.mejs-horizontal-volume-total {
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background: #636363;
	margin: 5px 5px 5px 5px;
	border-radius: 5px 5px 0 0;
}

.mejs-horizontal-volume-current {
	position: absolute;
	width: calc(100% - 10px);
	background: #ffff00;
	margin: 5px 5px 5px 5px;
	border-radius: 5px 5px 0 0;
}

.mejs-horizontal-volume-handle {
	display: none;
}


/*/////////////////////////////////////*/


/*///////////////////////////////////////
* Animation rules
///////////////////////////////////////*/

@-webkit-keyframes move {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 50px 50px;
	}
}

@keyframes move {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 50px 50px;
	}
}


/*/////////////////////////////////////*/


/*///////////////////////////////////////
* Rules for responsive
///////////////////////////////////////*/

@media (max-width: 700px) {
	.mejs-time {
		padding: 0px 10px 0px 50px;
	}
	.mejs-time-total {
		width: calc(100% - 5px) !important;
		border-radius: 0 3px 0 0;
		overflow: hidden;
	}
}