.luna {
	position: relative;
}

.luna-container, .luna .luna-controls{
	display                : -ms-flexbox;
    display                : -webkit-flex;
    display                : flex;
	-webkit-box-pack       : space-around;
    -moz-box-pack          : space-around;
    -ms-flex-pack          : space-around;
    -webkit-justify-content: space-around;
    justify-content        : space-around;
    -webkit-box-align      : center;
    -moz-box-align         : center;
    -ms-flex-align         : center;
    -webkit-align-items    : center;
    align-items            : center;
	max-width:
}

.luna-controls {
	position: relative;
}

.luna-container{

}
.luna-controls{
	max-width:252px;
}
.luna-audio-tag{
	display:none;
}

.luna-volume{
	margin:0 10px;
	max-width:110px;
}

.luna-volume{
	max-width:50px;
	min-width:50px;
}

.luna .luna-play,
.luna .luna-pause {
	width: 48px;
	height: 48px;
	background-color: #1A1D1F;
	border: 2px solid #272B30;
	border-radius: 8px;
	cursor: pointer;

	transition: background-color .23s ease-out;
}

.luna .luna-play:hover,
.luna .luna-pause:hover {
	background-color: #111315;
}

.luna .luna-play:before,
.luna .luna-pause:before {
	content: '';
	position: absolute;

	width: 24px;
	height: 24px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.luna .luna-play:before {
	top: 12px;
	left: 12px;

	background-image: url('../images/play.svg');
}

.luna .luna-pause:before {
	top: 10px;
	left: 10px;

	background-image: url('../images/pause.svg');
}

.luna .luna-pause {
	position: absolute;
	top: 0;
	left: 0;

	z-index: -1;
}

.luna .luna-pause.active {
	z-index: 1;
}

.luna-progress-bar {
	flex-grow: 1;

	height: auto;
	margin: 0 8px;
	padding: 4px;
	border: 2px solid #272B30;
	border-radius: 8px;
	cursor: pointer;
}

.luna-progress-bar-width {
	width: 0;
	height: 36px;
	background-color: #272B30;
	border-radius: 4px;

	transition: width .23s ease-out;
}

.luna .luna-volume {
	background-color: #bdc3c7;
	border-radius:5px;
	height:0.4em;
	cursor: pointer;
}
.luna .ui-slider-handle {
	opacity: 0;
}

.luna .luna-time-current,
.luna .luna-time-total {
	width: 72px;
	height: 48px;
	padding: 14px 12px;
	color: #6F767E;
	font-size: 13px;
	text-align: center;
	border: 2px solid #272B30;
	border-radius: 8px;
}