body														{ background:url(../images/bg.jpg) no-repeat; float:left; width:100%; margin:0px; padding:0px; }

.container {

    left: 50%;

    position: fixed;

    top: 40%;

    transform: translate(-50%, -50%);

}

.login_page													{ width:100%; float:left; position:relative; overflow:hidden; }

.login_box													{ width:400px; margin:0 auto; }

.login_rotating_div											{ width:100%; position:relative; margin-top:90px; height:400px; background:rgba(255,255,255,0.1); border:0px solid #fff; float:left; box-shadow:0px 0px 1px #fff; -ms-transform: rotate(45deg); /* IE 9 */

    -webkit-transform: rotate(45deg); /* Safari */

    transform: rotate(45deg); }

.login_rotating_normal_div									{ width:100%; height:100%; padding:30px; padding-top:0px;  /*background:#FFF;*/ text-align:center; float:left; box-shadow:0px 0px 0px #2c2c2c; -ms-transform: rotate(-45deg); /* IE 9 */

    -webkit-transform: rotate(-45deg); /* Safari */

    transform: rotate(-45deg); }



.login_logo_div												{ width:150px; height:150px; position:absolute; top:-149.6px; right:0px; background:rgba(255,255,255,0.1); text-align:center; padding-right:0px; float:left; border:0px solid #fff; }						



.login_logo_div	img											{  -ms-transform: rotate(-45deg); /* IE 9 */

    -webkit-transform: rotate(-45deg); /* Safari */

    transform: rotate(-45deg); }						





.login_logo													{  width:100%; float:left; margin-top:-40px; padding-left:0px; margin-bottom:10px; }						



.login_box h1												{  width:100%; float:left; margin:0px; margin-top:15px; margin-bottom:0px; padding:0px; font-size:26px; font-weight:600; color:#fff; }





/* Card */

.card {  width:100%; float:left;

  position: relative;

  border-radius: 5px;

  padding:0px 15px;

  box-sizing: border-box;

  -webkit-transition: .3s ease;

  transition: .3s ease;

  /* Title */

  /* Inputs */

  /* Button */

  /* Footer */

  /* Alt Card */

}



.form_container .title { width:100%; text-align:center;

    position: relative;

    z-index: 1;

    margin: 0 0 15px;

    padding: 10px 10px;

    color: #fff;

    font-size:25px;

    font-weight: 600;

    text-transform: uppercase;

}

.card .input-container {

  position: relative;

  margin:20px 10px;

}

.card .input-container input {

  outline: none;

  z-index: 1;

  position: relative;

  background: none;

  width: 100%;

  height: 60px;

  border: 0;

  color: #ececec;

  font-size: 15px;

  font-weight: 400;

}

.card .input-container input:focus ~ label {

  color: #b0ffff;

  -webkit-transform: translate(-8%, -30%) scale(0.65);

          transform: translate(-8%, -30%) scale(0.65);

}

.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {

  width: 50%;

}

.card .input-container input:valid ~ label {

  color: #b0ffff;

  -webkit-transform: translate(-8%, -30%) scale(0.65);

          transform: translate(-8%, -30%) scale(0.65);

}

.card .input-container label {

  position: absolute;

  top: 0;

  left: 0;

  color: #fff;

  font-size:14px;

  font-weight: 300;

  line-height: 60px;

  -webkit-transition: 0.2s ease;

  transition: 0.2s ease;

}

.card .input-container .bar {

  position: absolute;

  left: 0;

  bottom: 0;

  background: #cecece;

  width: 100%;

  height: 1px;

}

.card .input-container .bar:before, .card .input-container .bar:after {

  content: '';

  position: absolute;

  background:rgba(255,255,255,0.1);

  width: 0;

  height: 2px;

  -webkit-transition: .2s ease;

  transition: .2s ease;

}

.card .input-container .bar:before {

  left: 50%;

}

.card .input-container .bar:after {

  right: 50%;

}



.card .button-container	{ width:100%; float:left; }



.card .button-container {

    position: relative;

    margin:30px 0px 0px 0px;

}

.card .button-container:before {

content: '';

position: absolute;

top: -15px;

left: -9px;

width: 0;

height: 0;

/*border-top: 16px solid transparent;

border-right: 23px solid rgba(255,255,255,0.4);*/



border-top: 0px solid transparent;

border-right: 0px solid rgba(255,255,255,0.4);



-webkit-transition:.5s all;

-moz-transition:.5s all;

-o-transition:.5s all;

-ms-transition:.5s all;

transition:.5s all;

}

.card .button-container:after {

    content: '';

    position: absolute;

	top: -15px;

	right: -9px;

    width: 0;

    height: 0;

   /* border-left:23px solid rgba(255,255,255,0.4);

    border-top:16px solid transparent;*/

    border-left:0px solid rgba(255,255,255,0.4);

    border-top:0px solid transparent;

	-webkit-transition:.5s all;

	-moz-transition:.5s all;

	-o-transition:.5s all;

	-ms-transition:.5s all;

	transition:.5s all;

}

.card .button-container input[type="submit"] { 

	font-size: 1.2em;

	color: #FF9800;

	background:rgba(255,255,255,0.0);

	outline: none;

	cursor: pointer;

	padding: 0.6em 0;

	-webkit-appearance: none;

	border:1px solid #fff; 

	width: 100px; 

	margin-left:-0%;  

}

.card .button-container input[type="submit"]:hover {

    color: #FFF;

    background: #FF9800;

	-webkit-transition:.5s all;

	-moz-transition:.5s all;

	-o-transition:.5s all;

	-ms-transition:.5s all;

	transition:.5s all;

}

.card .button-container:hover:before {

    border-right-color:#FF9800;

}

.card .button-container:hover:after {

	border-left-color:#FF9800;

}

.form_tbox_icon {

    font-size: 16px;

    color: #fff;

    position: absolute;

    bottom: 20px;

    right: 15px;

}

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

.login_rotating_div											{  -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg); }
.login_rotating_normal_div									{ height: 440px; -ms-transform: rotate(-0deg); /* IE 9 */ -webkit-transform: rotate(-0deg); /* Safari */ transform: rotate(-0deg); } 
.login_box													{ width:300px; }
.card .button-container										{ margin: 15px 0px 0px 0px; }
}
/*@media screen and (min-width:640px), screen\0 { 
.container { position:relative; left:auto; top:20px; }
.login_rotating_normal_div									{ background:none; }
i.fa															{ display:none; }
.card .input-container input									{ padding:10px; text-align:right; }
}
@media screen and (min-width:640px), screen\9 { .container { position:relative; left:auto; top:20px; } 
.login_rotating_div											{ background-image:url(../images/log_bg.png); }
.login_rotating_normal_div									{ background:none; }
i.fa															{ display:none; }
.card .input-container input									{ padding:15px; text-align:right; }
}*/