.video-player { background: var(--color1); /*box-shadow: var(--shadow1);*/ position: relative; }
.video-element { width: 100%; }
.video-poster { left: 0; position: absolute; top: 0; width: 100%; }
.video-poster.hidden img { opacity: 0; }
.video-poster img { display: block; width: 100%; }
.video-player .video-overlay { 	
					background: url(../img/video-player/play-overlay.svg); 
					background-repeat: no-repeat; 
					background-position: center center;
					background-size: 90px 90px;
					cursor: pointer; 
					height: 100%; 
					left: 0; 
					opacity: 0;
					position: absolute; 
					top: 0; 
					width: 100%; 
				}
				
@media screen and (max-width: 900px)
{
	.video-player .video-overlay { background-size: 12%; }
}

.video-player.paused .video-overlay { opacity: 1.0; }
.video-player.paused .video-overlay:hover { opacity: 0.9; }
.video-controls-wrapper { align-items: center; bottom: 0; display: flex; height: 45px; justify-content: center; left: 0; overflow: hidden; position: absolute; width: 100%; }
.video-controls { background: rgba(255,255,255,0.0); display: flex; height: 45px; margin: 0 auto; position: relative; transform: translate(0,45px); transition: transform 450ms ease-out 450ms; width: 100%; }
.video-player.paused .video-controls { transform: translate(0,0); }
.video-player:hover .video-controls { /*background: rgba(255,255,255,0.2);*/ transform: translate(0,0); transition: transform 450ms ease-in; }
.video-controls .player-button { 
							background-color: transparent; 
							background-position: center center; 
							background-repeat: no-repeat; 
							background-size: 27px 27px; 
							/* border: 1px solid rgb(255, 255, 255);  */
							cursor: pointer; 
							height: 44px;  
							width: 44px; 
						}
.video-player.muted .video-controls .mute-button { background-image: url(../img/video-player/speaker-muted.svg); }
.video-player.paused .video-controls .play-button { background-image: url(../img/video-player/play.svg); }
.video-player.ended .video-controls .play-button { background-image: url(../img/video-player/replay.svg); background-size: 34px 34px; }
.video-controls .play-button { background-image: url(../img/video-player/pause.svg); }
.video-controls .play-button:hover { background-color: rgba(255,255,255,0.2); }
.video-controls .stop-button { background-image: url(../img/video-player/stop.svg); background-size: 20px 20px; }
.video-controls .replay-button { background-image: url(../img/video-player/replay.svg); background-size: 34px 34px; }
.video-controls .mute-button { background-image: url(../img/video-player/speaker.svg); background-size: 45px 45px; }
.video-controls .fullscreen-button { background-image: url(../img/video-player/fullscreen.svg); background-size: 45px 45px; }
/* .video-controls progress { width: 100%; } */
/* .video-controls progress[data-state="fake"] { */
   /* background:#e6e6e6; */
   /* height:65%; */
/* } */

.video-time { color: rgb(255,255,255); display: inline-block; font-size: 13px; line-height: 45px; padding: 0 9px; white-space: nowrap; }

@media screen and (max-width: 720px)
{
	.video-time { padding: 0 4px; }
}

.volume { display: inline-block; position: relative; }
.volume-bars { cursor: pointer; display: flex; position: absolute; left: 0; padding: 16px 0; top: 0; }
.volume-bars:last-child { margin-right: 9px; position: relative; width: 27px; }
.volume-bars1 { z-index: 45; }
.volume-bars2 { z-index: 27; }
.volume-bars3 { z-index: 18; }
.volume-bars4 { z-index: 9; }
.volume-bar { background-image: none; background-repeat: no-repeat; background-size: 100% 100%; border-radius: 1.5px; height: 13px; margin-right: 3px; width: 3px; }
.volume-bars:last-child .volume-bar { background-image: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)); }
.volume:hover .volume-bars:last-child .volume-bar { background-image: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)); }
.volume:hover .volume-bars:last-child:hover .volume-bar { background-image: linear-gradient(var(--color1),var(--color1)); }
.volume:hover .volume-bars.active .volume-bar { background-image: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)); }
.volume:hover .volume-bars.active:hover .volume-bar { background-image: linear-gradient(var(--color1),var(--color1)); }
.volume-bars.active .volume-bar { background-image: linear-gradient(var(--color1),var(--color1)); }
.volume-bars:hover .volume-bar { background-image: linear-gradient(var(--color1),var(--color1)); }
.volume-bar:last-child { margin-right: 0; }

.progress-wrapper { cursor: pointer/*col-resize*/; flex-grow: 1; margin: 0 9px; }

/* Styling an indeterminate progress bar */

progress:not(value) {
	/* Add your styles here. */
}

/* Styling the determinate progress element */

progress[value] {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255,255,255,0.4);
	border: none;
	box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
	/* IE10 background-color */
	color: rgba(255,255,255,0.4);
	height: 7px;
	position: relative;
	width: 100%;
	/* width: calc(100% - 400px);  */
}

.video-controls progress[value]::-webkit-progress-bar {
	background-color: rgba(255,255,255,0.4);
	box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
}

.video-controls progress[value]::-webkit-progress-value {
	position: relative;
	background-size: 100% 100%;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

.video-controls progress[value]::-moz-progress-bar {
	/* background-image: linear-gradient(90deg, rgb(93,93,93), rgb(255, 255, 255) 27%); */
	background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
	background-size: 100% 100%;
}

/* Fallback technique styles */
.progress-bar {
	background-color: rgb(93,93,93);
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Dimensions should be similar to the parent progress element. */
	width: 100%; height: 7px;
}

.video-controls progress span {
	background-color: rgb(255, 255, 255);
	display: block;
	text-indent: -9999px;
	height: 100%;
}