body{

  font-family: arial;
  background-image:url(./lightBackground.png);
  background-size: auto 100%;

}

.blackFilter{

  display:none;

  opacity: 0;

  position:absolute;

  top:0px;
  left:0px;

  background-color: rgba(0,0,0,1);

  width:100%;
  height:100%;

  z-index:9999;

}

.formContainer{

  overflow-x:hidden;

  position:absolute;
  left: calc(50% - 232.5px);
  top: calc(50% - 250px);
  padding: 50px;
  margin:0px;
  width: 365px;
  height: 400px;
  background-color: white;
  box-shadow: 2px 2px 3px #777777;


}

@media screen and (max-width: 550px){

  .formContainer{

    width:calc(100% - 100px);
    height:calc(100% - 100px);
    top:0px;
    left:0px;

  }

}

.phase{

  position:absolute;
  top:170px;
  left:50px;

  transition: left 0.5s;
  width:calc(100% - 100px)

}

.mainImage{

  width:100px;


}

.signInText{

  margin-top:25px;
  font-size:20px;

}

.withYourText{

  font-size:15px;
  color:#444444;

}

.inputBox .placeholder{

  position:absolute;

}

.inputBox{

  margin-top:25px;

  position:relative;

  width:100%;

}

.inputBox .placeholder{

  color:#888888;
  font-size:15px;
  top:0px;

  z-index:0;

  transition-timing-function: linear;
  transition: font-size 0.2s, margin-top 0.2s, color 0.2s;

}

.errorMessage{

  margin-top:10px;
  font-size:11px;
  color:#d50000;

}

input{

  border:none;
  background-color:white;
  border-bottom:solid 1px #666666;
  font-size:15px;

  transition: border-color 0.5s;

  width:100%;

}

input:focus{

  outline:none;
  border-color:#4285f4;

}



.button{

  padding:10px;
  padding-right:20px;
  padding-left:20px;

  font-weight: bold;

  margin-top:75px;

  float:right;

  font-size:14px;
  border-radius: 5px;
  border:none;
  margin-bottom:15px;
  background-color:#4285f4;
  color:white;
  display:inline-block;

  cursor:pointer;

  box-shadow: 1px 1px 3px #888888;

}

.largeButton{

  padding:10px;
  padding-right:20px;
  padding-left:20px;

  font-weight: bold;

  float:right;

  font-size:14px;
  border-radius: 5px;
  border:none;
  background-color:#4285f4;
  color:white;
  display:inline-block;

  cursor:pointer;

  box-shadow: 1px 1px 3px #888888;

}

.boxLabel{

  font-size:25px;
  margin-bottom:5px;

}

.fancyLink{

  font-size:13px;

  float:left;
  margin-top:85px;

  color:#4285f4;
  text-decoration: none;

}

.fancyLink:visited{

  text-decoration: none;

}

.fancyLink:hover{

  cursor:pointer;
  text-decoration: none;

}

.fancyLink:active{

  text-decoration: none;

}