* { box-sizing: border-box }

@font-face{
 font-family: Bebas Neue;

}

.form {
  height: 18.75em;
  width: 32em;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-transform: uppercase;
  font-family: "Bebas Neue", Arial;
  color: #fff;
}
body {
/* Full height */
background-image: url('../images/bg3.png');
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Open Sans";
height:100%;
}
.loading {
    margin: 10% auto 15px;
    position: relative;

    height: 40px;
    width: 40px;
}
.loading .circle {
    border-radius: 100%;
    position: absolute;
}
.loading .circle.dark {
    background-color: #1F5BA9;
    height: 22px;
    left: 1px;
    top: 10px;
    width: 22px;
}
.loading .circle.light {
    background-color: #61B5E4;
    height: 25px;
    right: 1px;
    top: 8px;
    width: 25px;
}
.loading .branding {
    /*background: url("https://s18.postimg.org/8a4d3vj3p/db_loader.png") repeat scroll 0 0 transparent;*/
    height: 40px;
    width: 40px;
    position: absolute;
}

.form > div {
  height: 6.25em;
  width: 100%;
}

.username {
  background-color: #4daf7c;
}

.username::after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-style: solid;
  border-width: 0.5em 0.469em 0 0.469em;
  border-color: #4daf7c transparent transparent transparent;
  top: 6.25em;
  left: 50%;
  margin-left: -0.496em;
}

.password {
  background-color: #404241;
}

.password::after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-style: solid;
  border-width: 0.5em 0.469em 0 0.469em;
  border-color: #404241 transparent transparent transparent;
  top: 12.5em;
  left: 50%;
  margin-left: -0.496em;
}

.login {
  background-color: #e9c85d;
  display: table;
}

.login span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size:3em;
  cursor: pointer;
  width:100%;
}
.forget {
  background-color: #DC7633;
  display: table;
   
}
   .form > .forget {
    float:left;
    height: 3.25em;
  width: 50%;
    }
.forget span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size:1em;
  cursor: pointer;
}
.remember {
  background-color: #BA4A00;
  display: table;
   
}
   .form > .remember {
     float:right;
    height: 3.25em;
  width: 49%;
    }
.remember span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size:1em;
  cursor: pointer;
}


input[type="text"], input[type="password"] {
  height: 1.25em;
  width: 11.512em;
  font-size: 2em;
  text-align:center;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  /*border:0.033em #fff solid;*/
  margin-left: 2.1875em;
  margin-top: 1em;
  font-family: "Bebas Neue", Arial;
}
input[type=checkbox] + label {
  color: #fff;  
  background: transparent;
} 
input[type=checkbox]:checked + label {
   color: #fff;
   font-weight:bold;   
}
::placeholder {
  color: #fff;
}

::-moz-placeholder {
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}

::-webkit-input-placeholder {
  color: #fff;
}