body {
  font-family: sans-serif;
  background: #000;
}
h3 {
  text-align: center;
  font-family: sans-serif;
  font-weight: 200;
  font-size: 25px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
}

/*----------------------
  Video
----------------------*/
#video {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}

.video .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.video-intro {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-22%, -50%);
  z-index: 1;
}

.video-bg {
  transform: translate(-50%, -50%) ;
}

/*----------------------
  Video Container
----------------------*/

#form-section {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.form-container {
  display: flex;
  height: 100vh;
  position: relative;
}

.center-form {
  width: 300px;
  position: relative;
  margin: auto;
  z-index: 9;
}

/*----------------------
  Form
----------------------*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #a2a2a2;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #a2a2a2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #a2a2a2;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #a2a2a2;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #a2a2a2;
}

::placeholder { /* Most modern browsers support this now. */
   color: #a2a2a2;
}

#form-code,
#form {
  padding: 0 2%;
  position: relative;
  overflow: hidden;
  padding: 35px 20px;
  box-shadow: 0 0 11px #0045ad;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

#form-code p,
#form p { margin: 0; }

#form-code input,
#form input {
  width: 100%;
  text-align: center;
  margin: 7px 0px;
  border: 0;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 11px #0045ad;
  padding: 10px 0;
}

textarea { max-height: 110px;}

#form-code input[type="submit"],
#form input[type="submit"] {
  display: inline-block;
  width: inherit;
  padding: 10px 35px;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

#form-code input[type="submit"]:hover,
#form input[type="submit"]:hover {
  background: #002967;
}

.input-blue-shaow {
  box-shadow: 0 0 11px #0045ad;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

.bluebg {
  background: #003f9e !important;
  border: 1px solid #0056d8 !important;
}

.input-green-shaow:hover { background: #006b24 !important; }
.input-blue-shaow:hover { background: #00327b !important; }

/*----------------------
  Box Effect
----------------------*/
.green-effect span:nth-child(1) {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right, #001d0d ,#08a041);
  animation: animate1 2s linear infinite;
  animation-delay:1s;
}

.green-effect span:nth-child(2) {
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(to bottom, #001d0d ,#08a041);
  animation: animate2 2s linear infinite;
  animation-delay:2s;
}

.green-effect span:nth-child(3) {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to left, #001d0d ,#08a041);
  animation: animate3 2s linear infinite;
  animation-delay:1s;
}

.green-effect span:nth-child(4) {
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(to top, #001d0d ,#08a041);
  animation: animate4 2s linear infinite;
  animation-delay:2s;
}

.bluebg {
    background: #003f9e !important;
    border: 1px solid #0056d8 !important;
}

.input-blue-shaow:hover { background: #00327b !important; }

.active-form {
  background: rgba(0, 63, 158, 0.5) !important;
  border: 1px solid rgba(0, 86, 216, 0.3) !important;
}

.overlay-effect { background: rgba( 0, 0, 0, .85) !important; }
.error-message { color: red; }

.register-login-link a {
  text-transform: uppercase;
  color: #565656;
  font-weight: 200;
  text-decoration: none;
  position: relative;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
}

.register-login-link a:hover { color: #fff; }

.register-login-link a:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #565656;
    transition: width .3s;
    position: absolute;
    bottom: -2px;
    left: 0;
}

.register-login-link a:hover::after {
    width: 100%;
    background: #fff;
}

.user-login-form { display: none; }
.active { display: block !important; }

.login-forms-links p {
  display: inline-block;
  width: 49%;
}

.login-forms-links p:last-child { text-align: right; }
.form-option { display: inline-block !important; }
.secret-code {
  text-align: center;
  font-weight: 200;
  font-size: 20px;
  color: #00d200;
  background: #fff;
  padding: 10px;
}

.success {
  text-align: center;
  color: #47dd44;
  font-size: 20px;
  font-weight: 200;
  margin: 0px 0;
  padding: 0px 0;
}

.my-email {
  color: #00d2d2;
  text-decoration: none;
}

.my-email:hover { text-decoration: underline; }