@font-face{
	font-family: Ubuntu-L;
	src: url(fonts/ubuntu/Ubuntu-L.ttf);
}
html{
  /*background-image: url(../images/texture-1.jpg);*/
  background-color: #ffffff;
  height: 100%;
  /*box-shadow: inset 0px 0px 300px rgba(0,0,0,0.1);*/
}
.text{
  font-family: Ubuntu-L;
}
.title_login{
  font-family: Ubuntu-L;
  font-size: 16pt;
  color: #bd2a2a;
  margin-bottom: 10px;
}
body{
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url(../images/bigX.png);
  background-repeat: no-repeat;
  background-position: -50% 50%;
  position: absolute;
}
#logo{
  width: 100px;
}
#inp_user{
  margin-top: -50px;
  margin-left: -10px;
  font-size: 14pt;
  border: none;
  border-bottom: 1px solid #cacaca;
  padding: 10px 10px 10px 50px;
  background: transparent;
}
#frgt_user{
  margin-top: 10px;
  font-size: 14pt;
  border: none;
  background: transparent;
}
#inp_pwd{
  margin-top: -50px;
  margin-left: -10px;
  font-size: 14pt;
  border: none;
  border-bottom: 1px solid #cacaca;
  padding: 10px 10px 10px 50px;
  background: transparent;
}
#email_frgt{
  margin-top: 6px;
  font-size: 14pt;
  border: none;
  background: transparent;
}
#code{
  margin-top: 15px;
  margin-left: -10px;
  font-size: 14pt;
  border: none;
  border-bottom: 1px solid #cacaca;
  padding: 10px 10px 10px 50px;
}
#bt_login{
  float:right;
  margin-left: 3px;
  margin-top: 10px;
  border-radius: 5px;
  border: none;
  background: #bd2a2a;
  color: white;
  padding: 5px 20px;
  font-family: Ubuntu-L;
  cursor: pointer;
  font-size: 14pt;
}
#bt_login:hover{
  border-radius: 5px;
  background: #636363;
}
#bt_frgt{
  visibility: hidden;
}
.inp{
  color: gray;
  text-shadow: 1px 2px 3px #fff;
  margin-left: 20px;
  font-family: Ubuntu-L;
  background-color: transparent;
}
#footer_login{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 11%;
  height: 70px;
}

#formContainer{
  margin-top: 12%;
  margin-left: 55%;
  width: 550px;
  height: 300px;
}

#formContainer form{
	
	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Enabling a smooth animated transition */
	-moz-transition:0.8s;
	-webkit-transition:0.8s;
	transition:0.8s;
	
	/* Configure a keyframe animation for Firefox */
	-moz-animation: pulse 2s infinite;
	
	/* Configure it for Chrome and Safari */
	-webkit-animation: pulse 2s infinite;
}
/* Firefox Keyframe Animation */

#formContainer.flipped #login{
	
	opacity:0;
	
	/**
	 * Rotating the login form when the
	 * flipped class is added to the container
	 */
	
	-moz-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#formContainer.flipped #forgot{
	
	opacity:1;
	
	/* Rotating the recover div into view */
	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
#login{
  margin-left: auto;
  margin-right: auto;
  /*background-color: gray;*/
  width: 250px;
  height: 180px;
  /*background-image: url(../images/bg_input.png);*/
}
#forgot{
  background-image: url(../images/bg_input.png);
  margin-left: auto;
  margin-right: auto;
  margin-top: -196px;
  z-index:1;
	opacity:0;
  width: 250px;
  height: 180px;
  
  /* Rotating the recover password form by default */
	-moz-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}