html, body {
	background: #000;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */

	font-size: 0;
	line-height: 0;
	-webkit-text-size-adjust: 100%;
}

video {
	height: 100%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
}

/* video
====================================================================================== */

#video {
	height: 100%;
	left: calc(50% - 28.125vh);
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 56.25vh;
}

#video.playing {
	visibility: visible;
}

.narrow-view #video {
	height: 70vh;
	left: 50%;
	top: 48.5%;
	transform: translate(-50%, -50%);
	width: calc(0.5625 * 70vh);
}

#btn-play {
	cursor: pointer;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}


/* subtitles
====================================================================================== */

.subtitles {
	font-size: 0;
	line-height: 0;
	pointer-events: none;
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 2vw;

/*	left: 25vw;
	width: 50vw;

	left: 15vw;
	width: 70vw;

	left:  25px;
	width: calc(100% - 50px);*/

/*	left:  75px;
	width: calc(100% - 150px);*/

	left:  15%;
	width: 70%;

	text-align: center;
}

.subtitles .last {
	display: inline-block;
	font-size: 2vw;
	line-height: 1.4;
}

.subtitles .word {
	display: inline-block;
	padding-right: 0.4em;
	font-family: best;
	font-size: 2vw;
	line-height: 2;
	letter-spacing: 0.05em;

	/*font-size: 1.5vw;
	font-size: 1.75vw;*/
	line-height: 1.4;
}

.subtitles .word:last-child {
	padding-right: 0;
}

.subtitles .letter {
	display: inline-block;	

	color: yellow;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
	/*filter: drop-shadow(2px 4px 1px black) blur(1px);*/
	/*filter: blur(1px);*/
}

.subtitles.ch1 .letter {
	color: yellow;
	color: #ffa7e8;
	color: #ff5722;
}
.subtitles.ch2 .letter {
	color: #fff;
}
.subtitles.ch3 .letter {
	/*color: rgb(255 213 160);*/
	color: yellow;
}
.subtitles.ch4 .letter {
	color: lime;
	color: aqua;
	/*color: aquamarine;*/
	color: yellow;
}
.subtitles.ch5 .letter {
	color: yellow;
}

.narrow-view .subtitles {
	bottom: 30px;
	left: 20px;
	width: calc(100% - 40px);
}

.narrow-view .subtitles .word {
	font-size: 3vh;
	line-height: 1.5;

	/*font-size: 2vh;*/
	/*font-size: 2.5vh;*/
	font-size: 2.75vh;
}

.narrow-view .subtitles .letter {
	text-shadow: none;
	/*rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;*/
	/*filter: drop-shadow(1px 2px 1px pink) blur(1px)*/
}


/* overlay
====================================================================================== */

.overlay {
	height: 100%;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
}

.overlay .ov {
	/*opacity: 0;*/
	visibility: hidden;
}

.overlay .ov.active {
	/*opacity: 1;*/
	visibility: visible;
}

#ov-title img,
#ov-taod img {
	/*filter: invert(84%) sepia(93%) saturate(7007%) hue-rotate(233deg) brightness(100%) contrast(106%); */
	filter: invert(84%) sepia(93%) saturate(7007%) hue-rotate(233deg) brightness(100%) contrast(106%) drop-shadow(2px 4px 6px yellow);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;	
}

#ov-title {
	background: blue;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#ov-taod img {
	filter: none;
	/*filter: drop-shadow(2px 4px 6px pink) blur(2px);*/
}


/* cover
====================================================================================== */

.cover {
	background: #000;
	display: none;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999999;
}