body{
  padding:0;
  margin:0;
  background:#000;
}
.vid-container{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.bgvid{
  position:absolute;
  left:0;
  top:0;
  width:100vw;
}
.inner-container {
	width: 370px;
	border-radius: 10px;
	height: 470px;
	position: absolute;
	top: calc(50vh - 200px);
	left: calc(50vw - 200px);
	overflow: hidden;
}
form {
	margin-top: 42px;
}
img {
	width: 150px;
}
.bgvid.inner{
  top:calc(-50vh + 200px);
  left:calc(-50vw + 200px);
  filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='10'%20/></filter></svg>#blur");
  -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,0.13);
  padding:30px 0px;
  text-align:center;
}
.box h1{
  text-align:center;
  margin:30px 0;
  font-size:30px;
}
.box input {
	display: block;
	width: 300px;
	margin: 20px auto;
	padding: 15px;
	background: rgba(51, 51, 51, 0.5);
	color: #fff;
	border: 0;
}

.box input:focus,.box input:active,.box button:focus,.box button:active{
  outline:none;
}
.box input[type="submit"]{
  background: #89b939;
  border:0;
  color:#fff;
  padding:10px;
  font-size:20px;
  width:120px;
  margin:20px auto;
  display:block;
  cursor:pointer;
}
.box input[type="submit"]{
   background: #dc1a7b;
}
.box p{
  font-size:14px;
  text-align:center;
}
.box p span{
  cursor:pointer;
  color:#666;
}
.pink{
	background: rgb(223, 27, 125) !important;
}
.blue{
	background: rgb(0, 145, 220) !important;
}
.green{
	background: rgb(137, 185, 57) !important;
}
.yellow{
	background: rgb(249, 228, 41) !important;
	color: #3e3e3e !important;
}
footer {
	width: 100%;
	height: 50px;
	padding-top: 10px;
	background: #121212;
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0px -4px 22px #000;
	text-align: center;
	line-height: 7;
}
footer div {
	vertical-align: top;
	display: inline-block;
	margin: 0 30px;
	color: #fff;
	cursor: pointer;
}
footer div i.fa {
	border: 2px solid #fff;
	width: 32px;
	height: 32px;
	border-radius: 100%;
	line-height: 1.5;
}
.v6 {
	color: #fff;
	position: absolute;
	top: 50%;
	right: 0px;
	z-index: 999999;
	transform: translate(0,-50%);
	font-family: arial;
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 760px) {
	.inner-container  {
		background: #121212;
		height: 550px;
		width: 400px;
		position: relative;
		left: unset;
		top: unset;
		margin: auto;
		margin-bottom: 120px;
		transform: translate(0%,0%);
		overflow: hidden;
		border-radius: 10px;
		text-align: center;
	}
	.vid-container{
		overflow:auto;
	}
}
/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.vid-container{
		overflow:auto;
	}
	.inner-container {
		background: #121212;
		height: 100%;
		width: 100%;
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%,-50%);
		overflow: hidden;
		border-radius: 10px;
		text-align: center;
	}
	.inner-container  img {
		width: 200px;
		margin-top: 20px;
	}
	footer div {
		margin: 0 8px;
	}
	.form_container {
		height: 100%;
		width: 100%;
	}
	.error_message {
		background: #000000a3;
		border-radius: 10px;
		width: 250px;
		margin: auto;
		padding: 8px;
	}
	.form_container img {
		width: 140px;
		margin-top: 20px;
	}

}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
	.bgvid {
		position: absolute;
		left: -498px;
		top: 0;
		width: 230vw;
	}
	.bgvid.inner {
		left: calc(-50vw + -300px);
	}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.bgvid {
		position: absolute;
		left: 50%;
		top: 0;
		width: 130vw;
		transform: translate(-50%);
	}
	.bgvid.inner {
		left: calc(-50vw + 706px);
	}
}
input{
	position:relative;
	
}
label{
	position:absolute;
	left:20px;
	top:14px;
	transition: 0.2s ease;
}
input:focus + label{
	top:-18px;
	left:5px;
	font-size:14px;
}
input:-webkit-autofill + label{
	top:-18px;
	left:5px;
	font-size:14px;
}
input:-moz-autofill + label{
	top:-18px;
	left:5px;
	font-size:14px;
}