html {
	--playerHeight: var(--bs-aspect-ratio);
	--playerHeight: 580px;
	--stuckHeight: 160px;
	--hoverButtonBackground: #0d6efd;
	--buttonSize: 28px;
}
.video {
	height: var(--playerHeight);
	
}

.video-js {
	/*transition: height .2s;*/
}

.video-js .vjs-play-progress:before {
	display: none;
}
.video-js .vjs-slider, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
	height: 3px;
}
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
	display: none;
}
.vjs-control-bar {
	/*margin-bottom: 15px;*/
}

/* https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/ */
@-webkit-keyframes fade-in-up {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}
@keyframes fade-in-up {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}
.video-wrap {
	text-align: center;
	background: #222;
	background: #000;
	margin-left: calc(-1 * var(--bs-gutter-x) * .5);
	margin-right: calc(-1 * var(--bs-gutter-x) * .5);
}

.video iframe {
	max-width: 100%;
	max-height: 100%;
}

.video.stuck {
	position: fixed;
	top:0;
	right: auto;
	width: 100%;
	height: var(--stuckHeight);
	z-index: 10000;
}



.video.stuck #close_stuck {
	display: block;
	top: 25px;
	right: 20px;
	position: absolute;
}
.ratio-9x16 {
	--bs-aspect-ratio: 177.8%;
}
.ratio-3x4 {
	--bs-aspect-ratio: 133.4%;
}
/*
@media (min-width: 576px) {

}

@media (min-width: 768px) {
	
}
*/
@media (min-width: 992px) {
	html {
		--playerHeight: 460px;
		--stuckHeight: 245px;
	}
	.video {
		height: var(--playerHeight);
	}
	.video.stuck { /* hacer versiones mobile y desktop */
		position: fixed;
		top: 20px;
		bottom: 20px;
		right: 20px;
		width: 360px;
		height: var(--stuckHeight);
		transform: translateY(-100%);
		-webkit-animation: fade-in-up 0.15s ease forwards;
		animation: fade-in-up 0.15s ease forwards;
	}
	#video-title h2 {
		font-size: 1rem;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.stuck #video-title h2 {
		font-size: .9rem;
	}
	.video-wrap {
		text-align: center;
		background: #222;
		margin-left: 0;
		margin-right: 0;
	}
	.video #next_video {
		margin-top: calc(var(--playerHeight)/2);
		cursor: pointer;
		text-align: right;
		left: calc(100vw - 75px);
		z-index: 999999;
	}
	.video.stuck #next_video {
		margin-top: calc(var(--stuckHeight)/2 - 25px);
		cursor: pointer;
		text-align: right;
		left: 300px;
		z-index: 999999;
	}
	.fullwindow #reels-player-controls {
		height: calc(100vh - 0px) !important;
	}
	.ratio-9x16 {
		--bs-aspect-ratio: 70%;
	}
	.ratio-3x4 {
		--bs-aspect-ratio: 70%;
	}
}
/*
@media (min-width: 1200px) {
	
}

@media (min-width: 1400px) {
	
}
*/