@charset "UTF-8";

/**
 * mediaplayers.css 1.0.0
 *
 * HTML5 and YouTube media player via vLitejs.
 * Supports video, audio, and iframe embed (YouTube).
 *
 * STRUCTURE
 * .mediaplayer > .media > .v-vlite
 * .mediaplayer-container — max-width wrapper for overlay
 *
 * TYPES
 * .mediaplayer                    — HTML5 video [default]
 * .mediaplayer.youtube            — YouTube embed
 * .mediaplayer[data-type="audio"] — audio
 *
 * DATA ATTRIBUTES
 * data-background   — background image (fallback: YouTube default poster)
 * data-controls     — show controls (default: true)
 * data-muted        — muted (default: false)
 * data-loop         — loop (default: false)
 * data-autoplay     — autoplay (default: false)
 * data-autolaunch   — autoplay when visible (default: false)
 * data-passive      — no interaction (default: false)
 *
 * VLITE VARIABLES
 * --vlite-colorPrimary                — primary color (#ff7f15)
 * --vlite-controlBarHeight            — control bar height (50px)
 * --vlite-controlBarHorizontalPadding — control bar horizontal padding (10px)
 * --vlite-controlBarBackground        — control bar background
 * --vlite-controlsColor               — controls color (video: #fff, audio: #000)
 * --vlite-controlsOpacity             — controls opacity (0.9)
 * --vlite-progressBarHeight           — progress bar height (5px)
 * --vlite-progressBarBackground       — progress bar background
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== DEFAULT ========== */

:root {
	--mediaplayer-font-size: 2rem;
	--mediaplayer-ratio: 16/9;
	--mediaplayer-background-color: var(--light-color);
	--mediaplayer-border-radius: 1em;

	--vlite-bigplay-size: 2.5em;
	--vlite-bigplay-color: var(--dark-color);
	--vlite-bigplay-background: var(--bright-color);
	--vlite-bigplay-shadow: drop-shadow(0 0 .125em rgba(var(--dark-rgb), .33));
}

.v-vlite {
	--vlite-colorPrimary: var(--bright-color) !important;
	--vlite-controlBarHeight: 4.5rem !important;
	--vlite-progressBarBackground: var(--dark-color) !important;
	--vlite-controlBarBackground: linear-gradient(0deg, var(--dark-color), transparent) !important;
}


/* ========== AUDIO ========== */

.mediaplayer[data-type="audio"] .v-vlite {
	--vlite-colorPrimary: var(--dark-color) !important;
	--vlite-progressBarBackground: var(--bright-color) !important;
	--vlite-controlBarBackground: linear-gradient(0deg, var(--dark-color), transparent) !important;
}


/* ========== @MEDIA ========== */

@media (max-width: 760px) {
	.v-vlite {
		--vlite-volumeBarWidth: 1.5em;
	}
}
@media (min-width: 760px) {
	.v-vlite {
		--vlite-volumeBarWidth: 6em;
	}
}


/* ==================================================== */
/* ==================== ANIMATIONS ==================== */
/* ==================================================== */

.v-vlite .v-container {
	transition: opacity var(--duration-fast) var(--ease);
}

/* in */

.v-vlite.v-playing iframe,
.v-vlite.v-playing .v-poster,
.v-vlite.v-playing .v-controlBar {
	transition: opacity var(--duration-fast) var(--ease) var(--duration-fast) !important;
}

/* out */

.v-vlite.v-paused iframe,
.v-vlite.v-paused .v-poster,
.v-vlite.v-paused .v-controlBar {
	transition: opacity var(--duration-fast) var(--ease) !important;
}


/* ===================================================== */
/* ==================== HTML5 VIDEO ==================== */
/* ===================================================== */

video {
	display: block;
	height: auto;
	width: 100%;
}

/* Hide native Chrome download button */

.mediaplayer.chrome video::-internal-media-controls-download-button {
	display: none;
}
.mediaplayer.chrome video::-webkit-media-controls-enclosure {
	overflow: hidden;
}
.mediaplayer.chrome video::-webkit-media-controls-panel {
	width: calc(100% + 32px);
	margin-left: auto;
}


/* ===================================================== */
/* ==================== MEDIAPLAYER ==================== */
/* ===================================================== */


/* ========== DEFAULT ========== */

.mediaplayer {
	position: relative;
	display: block;
	width: 100%;
	font-size: var(--mediaplayer-font-size);
	aspect-ratio: var(--mediaplayer-ratio);
	background: var(--mediaplayer-background-color);
	overflow: hidden;
}
.mediaplayer > * {
	margin: 0;
}

.mediaplayer-background {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.mediaplayer .media {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
}


/* ========== AUDIO ========== */

.mediaplayer[data-type="audio"] {
	aspect-ratio: initial;
	border-radius: var(--mediaplayer-border-radius);
}


/* ========== PASSIVE ========== */

.mediaplayer[data-passive="true"] {
	pointer-events: none;
}


/* ========== IFRAME ========== */

.mediaplayer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ========== VISIBLE EMBED ========== */

.mediaplayer .visible-embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
	opacity: 1;
}


/* =============================================== */
/* ==================== VLITE ==================== */
/* =============================================== */


/* ========== DEFAULT ========== */

.v-vlite {
	z-index: 10;
	background: none !important;
}


/* ========== EMBED ========== */

/* Hide YouTube suggested videos when paused or loading */

.v-vlite.v-loading:not(.v-playing) iframe,
.v-vlite.v-paused iframe {
	opacity: 0;
}


/* ========== LOADER ========== */

.v-loaderContent {
	width: 100%;
}
.v-loaderContent > div {
	height: .5em;
	width: .5em;
}


/* ================================================== */
/* ==================== CONTROLS ==================== */
/* ================================================== */

.v-vlite .v-controlBar {
	z-index: 40;
}
.v-vlite .v-progressBar {
	height: 100% !important;
}
.v-vlite.v-video .v-controlBar {
	padding: .5em 0 0 0;
}
.v-vlite.v-video .v-progressBar {
	min-height: auto;
	padding: .5em;
	height: .5em !important;
}

/* Hide control bar when paused or loading */

.v-vlite:not(.v-audio).v-loading:not(.v-playing) .v-controlBar,
.v-vlite:not(.v-audio).v-paused .v-controlBar {
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
}
.v-controlBar button {
	height: 1.5em;
	width: 1.5em;
	background: none !important;
}
.v-iconPressed {
	margin: 0;
}
.v-time {
	font-size: .875rem;
	font-weight: var(--font-weight-bold);
	align-self: stretch;
}


/* ================================================ */
/* ==================== VOLUME ==================== */
/* ================================================ */

.v-volumeArea {
	display: flex;
	align-items: center;
	height: 100%;
}
.v-vlite.v-audio .v-volumeArea {
	margin-right: .25em;
}
.v-volumeBar {
	min-height: auto;
	padding: 0;
	width: var(--vlite-volumeBarWidth);
}


/* ================================================== */
/* ==================== BIG PLAY ==================== */
/* ================================================== */

.v-bigPlay {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	transform: none;
	color: var(--vlite-bigplay-color);
	filter: var(--vlite-bigplay-shadow);
	line-height: 1;
	background: none !important;
}
.v-bigPlay:hover {
	color: var(--vlite-bigplay-color);
}
.v-bigPlay:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	height: var(--vlite-bigplay-size);
	width: var(--vlite-bigplay-size);
	border-radius: 50%;
	background: var(--vlite-bigplay-background);
	transform: translate(-50%, -50%);
}
.v-bigPlay:hover:after {
	transform: translate(-50%, -50%) scale(1.25);
}
.v-bigPlay svg {
	stroke: none;
	display: none;
}
.v-bigPlay .icon-play.animated .label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Visibility states */

.v-vlite.v-loading:not(.v-playing) .v-bigPlay,
.v-vlite.v-playing .v-bigPlay {
	opacity: 0;
	visibility: hidden;
}
.v-vlite.v-loading .v-bigPlay.placeholder {
	opacity: 1;
	visibility: visible;
}


/* ========== @HOVER ========== */

@media (hover: hover) {

	/* pause */

	.v-bigPlay[data-state="paused"] .icon-play.animated .label:before,
	.v-bigPlay[data-state="playing"]:hover .icon-play.animated .label:before {
		clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	}
	.v-bigPlay[data-state="paused"] .icon-play.animated .label:after,
	.v-bigPlay[data-state="playing"]:hover .icon-play.animated .label:after {
		clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
	}

	/* play */

	.v-bigPlay[data-state="paused"]:hover .icon-play.animated .label:before,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label:before {
		clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	}
	.v-bigPlay[data-state="paused"]:hover .icon-play.animated .label:after,
	.v-bigPlay[data-state="playing"] .icon-play.animated .label:after {
		clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	}
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

/* here for custom mediaplayer overrides */