@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
	--accent: #00C6F2;
/* 	--accent: #d7577e; */

	--main: #ffffff;
}


html {
	display: flex;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	font-size: 16px;
	color: var(--main);
}
body {
	width: 100%;
	height: 100%; 
	background-color: #fff0 !important;
	padding: 10px 20px;
	 -webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari, Chrome, Opera, Samsung */
	  -khtml-user-select: none; /* Konqueror HTML */
	  -moz-user-select: none; /* Firefox */
	  -ms-user-select: none; /* Edge, IE */
	  user-select: none; /* Modern browsers */
}

.player-container {
	padding: 40px;
	max-width: 700px;
	margin: auto;
}
.player {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	background: #000000;
}
.player:fullscreen {
	padding-bottom: 100vh;
}
.player:-webkit-full-screen {
	padding-bottom: 100vh;
}
.player:-moz-full-screen {
	padding-bottom: 100vh;
}
.player:-ms-fullscreen  {
	padding-bottom: 100vh;
}
.player video {
	width: 100%;
	height: auto;
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.controls {
	padding: 0;
	position: absolute;
	bottom: -80px;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	background: linear-gradient(
		180deg,
		rgba(37, 37, 37, 0) 10%,
		rgba(37, 37, 37, 0.6) 80%
	);
	transition: all 0.2s ease-in 5s;
}
.player:hover .controls {
	bottom: 0;
	transition: all 0.2s ease-out;
}
.time {
	position: absolute;
	right: 30px;
	bottom: 100%;
	padding-bottom: 14px;
}
.progress {
	height: 8px;
	width: calc(100% - 40px);
	background: rgba(60, 60, 60, 0.6);
	margin: auto;
	border-radius: 6px;
	position: absolute;
	left: 20px;
	bottom: 100%;
	transition: height 0.1s ease-in-out;
}
.progress:hover {
	height: 10px;
}
.progress-filled {
	background: var(--accent);
	width: 0%;
	height: 100%;
	border-radius: 6px;
	transition: all 0.1s;
}
.controls-main {
	width: calc(100% - 40px);
	margin: auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
}
.controls-left,
.controls-right {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.controls-left {
	margin-left: 10px;
}
.controls-right {
	margin-right: 10px;
	justify-content: flex-end;
}
.volume {
	display: flex;
	align-items: center;
}
.volume-btn {
	margin-right: 10px;
}
.volume-btn #volume-off, .volume-btn #volume-high {
	opacity: 0;
}
.volume-btn.loud #volume-high{
	opacity: 1;
}
.volume-btn.muted #volume-off {
	opacity: 1;
}
.volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
	opacity: 0;
}
.volume-slider {
	height: 8px;
	width: 80px;
	background: rgba(60, 60, 60, 0.6);;
	border-radius: 6px;
	position: relative;
}
.volume-filled {
	background: var(--main);
	width: 100%;
	height: 100%;
	border-radius: 6px;
	transition: width 0.2s ease-in-out;
}
.volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
	background: var(--accent);
}
button {
}
.play-btn {
	width: 30px;
	height: 30px;
	position: relative;
	margin: auto;
	transform: rotate(-90deg) scale(0.8);
	transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
		transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
}
.play-btn.paused {
	transform: rotate(0deg);
}
.play-btn:before,
.play-btn:after {
	content: "";
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: inherit;
}
.play-btn:before {
	-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
	shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
.play-btn:after {
	-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
	shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
.play-btn.paused:before {
	-webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
	shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
}
.play-btn.paused:after {
	-webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
	shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
}
button:focus {
	outline: none;
}
.speed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	margin-right: 20px;
	text-align: center;
}
.speed-list li {
	color: var(--main);
	padding: 5px;
	cursor: default;
}
.speed-list li:hover,
.speed-list li.active {
	color: var(--accent);
	font-weight: bold;
}



.speed2-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	margin-right: 20px;
	text-align: center;
}
.speed2-list li {
	color: var(--main);
	padding: 5px;
	cursor: default;
}
.speed2-list li:hover,
.speed2-list li.active {
	color: var(--accent);
	font-weight: bold;
}



.fullscreen {
	display: flex;
	justify-content: center;
}
.time-current{
	color: #fff;
}

.control2{
	display:flex;
}
.control2-item{
	flex-grow: 1;
}


.play-btn-item{
	text-align: right;
}