:host {

  display: block;
  position: relative;
	overflow: hidden;
	user-select: none;

  --black: #000;
  --dark: #2D2D2C;
  --white: #fff;
  --blue: #0693e3;
}

:host([loading]) {

	pointer-events: none;
}

:host([loading]):before {

	opacity: 1;
}

:host:before {

	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--black);
	transition: 1s 0.2s ease all;
	z-index: 5;
	pointer-events: none;
  opacity: 0;
}

.video {

  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
  z-index: 1;
}

.video video {

	position: absolute;
	left: 50%; /* % of surrounding element */
	top: 50%;
	transform: translate(-50%, -50%); /* % of current element */
	height: 100%;
	width: 177.777vh; /* 100 * 16 / 9 */*/
	min-width: 100%;
	min-height: 56.25vw; /* 100 * 9 / 16 */
}