*{margin: 0;padding: 0; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-smoothing: antialiased;}
#container{cursor:pointer;width: 300px; height: 600px;border:1px black solid;box-sizing: border-box;opacity:0;overflow:hidden;background-color:#000;}

img {
  image-rendering: optimize-contrast;
}
div, img, svg{
	position: absolute;
}
.o{
	opacity:0;
	visibility: hidden;
}
.f-wh{
	width: 300px;
	height: 600px;
}
.mask{
	overflow: hidden;
}

.c-h{
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	left:50%
}	
.c-v{
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top:50%
}
.c-hv{
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	top:50%;
	left:50%;
}

.text1-holder{
	width: 300px;
	height: 69px;
}
.text2-holder{
	width: 300px;
	height: 158px;
}
.text3-holder{
	width: 300px;
	height: 181px;
}
.text4-holder{
	width: 300px;
	height: 200px;
}

.ray {
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 30%,
        black 100%
    );
    -webkit-mask-size: 200% 100%;
    -webkit-mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    /* animation: revealFade 1.2s forwards; */
}