.video-controls {
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
}

.video-controls.hidden {
	display: none !important;
}

.video-controls .btn-big {
	width: 80px; height: 80px;
	width: calc(80px * var(--scale) * 2.5);
	height: calc(80px * var(--scale) * 2.5);
	
	background-image: url(./img/play.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	filter: drop-shadow(rgba(0,0,0,.5) 2px 2px 4px);
    transition: opacity ease-in-out .5s;
	opacity: 1;
}

.video-controls .btn-big.hidden {
	opacity: 0;
}

.video-controls.active {
	display: flex;
}

.video-controls .btn-close {
	position: absolute;
	height: 34px;
	width: 34px;
	height: calc(34px * var(--scale) * 2.5);
	width: calc(34px * var(--scale) * 2.5);
	
	border-radius: 20px;
	border-radius: calc(20px * var(--scale) * 2.5);
	
	background: rgba(0,0,0,.4);
	top: 8px; right: 8px;

	top: calc(8px * var(--scale) * 2.5);
	right: calc(8px * var(--scale) * 2.5);
	
	background-image: url(./img/close.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
    transition: scale ease-in-out .3s, opacity ease-in-out .5s;
	opacity: 0;
	display: none;
}

.video-controls .btn-close.active {
	display: unset;
	opacity: 1;
}

.video-controls .btn-close:hover {
	scale: 1.15;
}

.video-controls .vid-bar {
	position: absolute;
	height: 40px;
	height: calc(40px * var(--scale) * 2.5);
	left: 4px; right: 4px; bottom: 4px;
	left: calc(4px * var(--scale) * 2.5);
	right:calc(4px * var(--scale) * 2.5);
	bottom:calc(4px * var(--scale) * 2.5);
	background: rgba(0,0,0,.4);
	border-radius: 4px;
	border-radius: calc(4px * var(--scale) * 2.5);
	display: flex;
    transition: opacity ease-in-out .5s;
	opacity: 0;
	pointer-events: none;
	align-items: center;
	padding: 8px;
	gap: 8px;
	padding: calc(8px * var(--scale) * 2.5);
	gap: calc(8px * var(--scale) * 2.5);
}

.video-controls.paused:hover .vid-bar,
.video-controls.playing:hover .vid-bar {
	opacity: 1;
	pointer-events: auto;
}

.vid-bar .btn {
	width: 24px; height: 24px;
	width: calc(24px * var(--scale) * 2.5);
	height: calc(24px * var(--scale) * 2.5);
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.vid-bar .spacer {
	flex: 1;
}

.vid-bar .scrub {
	flex: 1;
	height: 6px;
	height: calc(6px * var(--scale) * 2.5);
	background: rgba(255,255,255,.3);
	position: relative;
}

.vid-bar .scrub .progress {
	position: absolute;
	height: 100%;
	top: 0; left: 0;
	width: 0;
	background: rgba(255,255,255,.5);
	pointer-events: none;
}


.vid-bar .time {
	font-family: 'Roboto Light', sans-serif;
	/* font-size: 12px; */
	font-size: calc(12px * var(--scale) * 2.5);
	color: rgba(255,255,255,.6);
}

.vid-bar .btn.play {
	background-image: url(./img/play-arrow.svg);
}

.video-controls.playing .vid-bar .btn.play {
	background-image: url(./img/pause.svg);
}

.vid-bar .btn.mute {
	background-image: url(./img/volume-up.svg);
}

.video-controls.muted .vid-bar .btn.mute {
	background-image: url(./img/volume-off.svg);
}


/* POPUP */

.video-overlay {
	position: absolute;
	top:0; left: 0;
	background-color: rgba(0, 0, 0, .7);
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
	
.video-overlay video {
	height: 100%;
}