@charset "UTF-8";

/**
.mediaplayer == default
.mediaplayer.youtube == for youtube video
> data-background == for background image / if none youtube default
> id == video id
.mediaplayer-container == for overlay max-width 1024px
**/

/*
data-controls="true"		# show controls
data-muted="false"			# muted
data-loop="false"			# loop video
data-autoplay="false"		# autoplay
data-autolaunch="false"		# smart autoplay (only visible)
data-passive="false"		# no interaction

data-mediaplayer-initialized="true"
*/

/**
--vlite-colorPrimary	#ff7f15	Primary color
--vlite-transition	0.25s ease	Transition
--vlite-controlBarHeight	50px	Control bar height
--vlite-controlBarHorizontalPadding	10px	Control bar horizontal padding
--vlite-controlBarBackground	linear-gradient(to top, #000 -50%, transparent)	Control bar background
--vlite-controlsColor	#fff|#000	Controls color (video|audio)
--vlite-controlsOpacity	0.9	Controls opacity
--vlite-progressBarHeight	5px	Progress bar height
--vlite-progressBarBackground	rgba(0 0 0 / 25%)	Progress bar background
**/

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

:root {
	--mediaplayer-font-size: 2rem;
	--mediaplayer-ratio: 16/9;
}
.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;
}

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

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

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

video {
	display: block;
	height: auto;
	width: 100%;
}
.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-CONTAINER **********/
/*******************************************/
/*******************************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

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

/***************************/
/********** AUDIO **********/
/***************************/

.mediaplayer[data-type="audio"] {
	aspect-ratio: initial;
}

/*****************************/
/********** PASSIVE **********/
/*****************************/

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

/****************************/
/********** CUSTOM **********/
/****************************/

.mediaplayer.aligncenter,
.mediaplayer.centered {
	margin-right: auto;
	margin-left: auto;
}





.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%;
}

/****************************/
/********** 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;
}

/***************************/
/********** AUDIO **********/
/***************************/

.mediaplayer[data-type="audio"] {
	border-radius: 1em;
}
.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;
}

/****************************/
/********** POSTER **********/
/****************************/
/*
.v-vlite .v-poster {
	z-index: 10;
}

.v-vlite.v-paused .v-poster {
	opacity: 1 !important;
	visibility: visible !important;
}
*/

/***************************/
/********** EMBED **********/
/***************************/

/* hide related videos for youtube */
.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;
}
.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 {
	width: var(--vlite-volumeBarWidth);
}

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

.v-bigPlay {
	position: absolute;
	z-index: 20;
	inset: 0;
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-transform: none;
	   -moz-transform: none;
	    -ms-transform: none;
	     -o-transform: none;
	        transform: none;
	-webkit-filter: drop-shadow(0 0 .125em rgba(var(--dark-rgb), .33));
	        filter: drop-shadow(0 0 .125em rgba(var(--dark-rgb), .33));
	line-height: 1;
	background: none !important;
}
.v-bigPlay:hover {
	color: var(--dark-color);
}
.v-bigPlay:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	height: 2.5em;
	width: 2.5em;
	background: var(--bright-color);
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
.v-bigPlay:hover:after {
	-webkit-transform: translate(-50%, -50%) scale(1.25);
	   -moz-transform: translate(-50%, -50%) scale(1.25);
	    -ms-transform: translate(-50%, -50%) scale(1.25);
	     -o-transform: translate(-50%, -50%) scale(1.25);
	        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%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

@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%);
	}
}

.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;
}

/********************************/
/********************************/
/********** 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;
}