@font-face {
    font-family: 'Sinkin';
    src: url('fonts/SinkinSans-100Thin-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Sinkin';
    src: url('fonts/SinkinSans-200XLight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body 
{ 
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

#video
{
	position: fixed; 
	right: 0; 
	top: 0; 
	width: 100%; 
	height: 100vh; 
	object-fit: cover;
}


div {
	position: absolute;
	left: 10px;
	top: 0;
	z-index: 2;
	color: #FFF;
	color: rgba(255, 255, 255, 0.2);
	font-family: 'Sinkin', 'Century Gothic';
	font-weight: inherit;
	font-size: 28px;
	padding: 0;
	margin: 0;
	transition: 400ms ease-out;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
small {
	display: block;
	font-size: 14px;
	padding-left: 8px;
}
div:hover {
	color: #FFF;
	filter: blur(0);
	text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}
body {
	margin: 0;
	padding: 0;
}
div.bg-overlay {
	z-index: 1;
	width: 250px;
	height: 250px;
	background: linear-gradient(135deg, #3ec2a6 9.9%,rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.0) 50%);
	opacity: 0;
	pointer-events: none;
	top: -250px;
	left: 0;
	transition: 400ms 120ms ease-out;
}
div.text-overlay:hover + div.bg-overlay {
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
	opacity: 1;
	top: 0;
}

div.text-overlay:hover + div.bg-overlay + div.bg-progress {
	top: 0;
}

div.bg-progress {
	z-index: 1;
	height: 4px;
	width: 0%;
	background: #3ec2a6;
	left: 0;
	top: -5px;
	transition: width 400ms linear, top 200ms;
}