/*  */
#media-player {
	margin:0 auto;
	clear:both;
	float:none;
	position:relative;
}
#media-controls {
	position: relative;
	bottom:5px;
	left:0; right:0;
	width: 100%;
	/*background:rgba(0,0,0,.1);*/
	background-color: #343434;
	font-family: inherit;
	font-size: 85%;
	color:#fff;
	padding:0 10px;
	box-sizing: border-box;
	z-index: 2147483647;
}

#h5p-progress-bar {
	width: 100%;
	height:4px;
	border:none;
	/*background: rgba(255,255,255,.2);*/
	background-color: #fff;
	cursor:pointer;
}
#h5p-progress-bar::-webkit-progress-bar {
	background-color: #fff;
}
#h5p-progress-bar::-webkit-progress-value {
background-color: #f2d2aa;
}
#h5p-progress-bar::-moz-progress-bar {
	/* style rules */
}

.h5p-flex {
	display: -ms-flexbox!important;
	display: flex!important;
	-ms-flex-direction: row!important;
	flex-direction: row!important;
}

.h5p-align-items-center {
	-ms-flex-align: center!important;
	align-items: center!important;
}

.h5p-ml-auto {
	margin-left: auto!important;
}

#media-controls button, #media-controls input {
	border:none;
	margin:5px 10px;
	outline: none!important;
}

.control-btn {
	width:18px; height:18px;
	display: block;
	background-size: contain!important;
	background-color: rgba(0,0,0,0)!important;
	background-repeat: no-repeat!important;
	background-position: center center;
}

.control-btn:hover {
	cursor:pointer;
}

.h5p-play-pause.play {
	background-image: url('icon/play.svg');
}

.h5p-play-pause.pause {
	background-image: url('icon/pause.svg');
}

#h5p-vol-icon {
	background-image: url('icon/volume.svg');
}

#h5p-vol-icon.mute {
	background-image: url('icon/mute.svg');
}

#h5p-full-screen, #h5p-full-screen-mobile {
	background-image: url('icon/select.svg');
	background-size:95%!important;
	margin:0 5px 0 10px;
}

figure[data-fullscreen=true] #h5p-full-screen, figure[data-fullscreen=true] #h5p-full-screen-mobile {
	background-image: url('icon/unselect.svg');
}

.h5p-time-duration {
	margin-left:10px;
}

#h5p-vol-range {
	display:inine-block;
	cursor:pointer;
	width:0;
	overflow: hidden;
	transition: 0.3s;
}

.h5p-volume-wrapper:hover #h5p-vol-range {
	width:75%;
	overflow: visible;
	transition: 0.3s;
}

#h5p-vol-range:hover {
	cursor:pointer;
}

#h5p-volume {
	-webkit-appearance: none;
	height:2px;
	max-width:50px;
	margin:0 5px!important;
	display:block;
	position: relative;
	background:rgba(255,255,255,.4);
	cursor:pointer;
}

#h5p-volume:before {
	height:2px;
	position: absolute;
	content: '';
	top:50%;
	margin-top: -1px;
	background:#fff;
	width:100%;
}

#h5p-volume::-webkit-slider-thumb{
	-webkit-appearance: none;
	width:12px; height:12px;
	border-radius: 50%;
	background:#fff;
}

.qua-wrapper {
	position:relative;
	margin-right:5px;
}

#h5p-cur-qua {
	color:#212121;
	background: #ffffff;
	border-radius:3px;
	font-weight:bold;
	font-size:80%;
	padding:3px 5px;
}

#h5p-cur-qua:hover {
	cursor:pointer;
	color:red;
}

#h5p-qua-list {
	position:absolute;
	background:rgba(255,255,255,1);
	bottom:30px;
	right:0;
	margin:0;
	list-style-type: none;
	min-width:100%;
	color:#212121;
	padding:3px;
	border-radius: 3px;
	display:none;
	transition: .3s;
}

#h5p-qua-list li {
	margin:5px 0;
	font-weight:bold;
	font-size:85%;
	display:block;
	white-space: nowrap;
}

#h5p-qua-list li:hover {
	color:red;
	cursor:pointer;
}

#h5p-qua-list.show {
	transition: .3s;
}

/*
video::-webkit-media-controls {
	display:none!important;
}

.controls {
	z-index:2147483647;
}

html:-ms-fullscreen {
	width:100%;
}
:-webkit-full-screen {
	background-color:transparent;
}

figure[data-fullscreen=true] video::-webkit-media-controls {
	display:none !important;
}
figure[data-fullscreen=true] {
	max-width:100%;
	width:100%;
	margin:0;
	padding:0;
}
figure[data-fullscreen=true] video {
	height:auto;
}
figure[data-fullscreen=true] figcaption {
	display:none;
}
figure[data-fullscreen=true] .controls {
	position:absolute;
	bottom:2%;
	width:100%;
	z-index:2147483647;
}
figure[data-fullscreen=true] .controls li {
	width:5%;
}
figure[data-fullscreen=true] .controls .progress {
	width:68%;
}
*/
.h5p-wrapper {
	position:absolute;
	top:0; left:0; right:0;
	width:100%;
	height:100%;
}

.h5p-wrapper img {
	width:64px;
	height: 64px;
	position:absolute;
	top:50%; left:50%;
	margin:-32px 0 0 -32px!important;
	border:none!important;
	transition:.3s;
}

.h5p-wrapper:hover {
	cursor:pointer;
}

.h5p-wrapper:hover img {
	transform: scale(1.2);
	transition:.3s;
}

.show-desctop {display:block;}
.show-mobile {display:none;}
@media (min-width:1025px){
	video::-webkit-media-controls {
		display:none!important;
	}

	.controls {
		z-index:2147483647;
	}

	html:-ms-fullscreen {
		width:100%;
	}
	:-webkit-full-screen {
		background-color:transparent;
	}

	figure[data-fullscreen=true] video::-webkit-media-controls {
		display:none !important;
	}
	figure[data-fullscreen=true] {
		max-width:100%;
		width:100%;
		margin:0;
		padding:0;
	}
	figure[data-fullscreen=true] video {
		height:auto;
	}
	figure[data-fullscreen=true] figcaption {
		display:none;
	}
	figure[data-fullscreen=true] .controls {
		position:absolute;
		bottom:2%;
		width:100%;
		z-index:2147483647;
	}
	figure[data-fullscreen=true] .controls li {
		width:5%;
	}
	figure[data-fullscreen=true] .controls .progress {
		width:68%;
	}
}
@media (max-width:1024px){
	.show-desctop {display:none;}
	.show-mobile {display:block;}
}