body {
	background: #000000;
	color: #00FF00;
	font-family: monospace;
}

.accessGranted {
	position: absolute;
	top: 200px;
	background: #333;
	padding: 20px;
	border: 1px solid #999;
	width: 300px;
	left: 50%;
	margin-left: -150px;
	text-align: center;
}

.accessDenied {
	position: absolute;
	top: 200px;
	color: #F00;
	background: #511;
	padding: 20px;
	border: 1px solid #F00;
	width: 300px;
	left: 50%;
	margin-left: -150px;
	text-align: center;
}

body {
	padding: 0;
	margin: 0
}

.vid-container {
	position: relative;
	height: 100vh;
	overflow: hidden
}

.bgvid.back {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100
}

.inner {
	position: absolute
}

.inner-container {
	width: 400px;
	height: 400px;
	position: absolute;
	top: calc(50vh - 200px);
	left: calc(50vw - 200px);
	overflow: hidden
}

.bgvid.inner {
	top: calc(-50vh + 200px);
	left: calc(-50vw + 200px);
	filter: url(data:image/svg+xml;utf9;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGZpbHRlciBpZD0nYmx1cic+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMTAnIC8+PC9maWx0ZXI+PC9zdmc+I2JsdXI=);
	-webkit-filter: blur(10px);
	-ms-filter: blur(10px);
	-o-filter: blur(10px);
	filter: blur(10px)
}

.box {
	position: absolute;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
	color: #fff;
	background: rgba(0, 0, 0, .13);
	padding: 30px 0
}

.box h1 {
	text-align: center;
	margin: 30px 0;
	font-size: 30px
}

.box input {
	display: block;
	width: 300px;
	margin: 20px auto;
	padding: 15px;
	background: rgba(0, 0, 0, .2);
	color: #fff;
	border: 0
}

.box input:focus, .box input:active, .box button:focus, .box button:active {
	outline: none
}

.box button {
	background: #742ecc;
	border: 0;
	color: #fff;
	padding: 10px;
	font-size: 20px;
	width: 330px;
	margin: 20px auto;
	display: block;
	cursor: pointer
}

.box button:active {
	background: #27ae60
}

.box p {
	font-size: 14px;
	text-align: center
}

.box p span {
	cursor: pointer;
	color: #666
}