@charset "utf-8";
/****************************************************
	Login Style
****************************************************/

.login-top-box	{
	width: 800px;
	margin: 100px auto;
	padding: 0 15px;
	max-width: 100%;
}

.login-box	{
	display: block;
	position: relative;
	width: 400px;
	max-width: 100%;
	margin: 0px auto;

	box-sizing: border-box;
}

.login-box fieldset	{
	display: block;
	position: relative;
}

.login-box fieldset + fieldset	{
	margin-top: 5px;
}
.login-box fieldset input	{
	width: 100%;
	box-sizing: border-box;
}


.login-logo { text-align: center;}

.login-logo img	{ display: block; margin: 0 auto;}


/****************************************************
	Login Style
****************************************************/


.row {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.clean-slide {
  position: relative;
  display: inline-block;
  width: 215px;
  padding: 10px 0 10px 15px;
  font-weight: 400;
  color: #283055;
  background: #efefef;
  border: 0;
  border-radius: 3px;
  outline: 0;
  text-indent: 60px;
  transition: all .3s ease-in-out;
}
.clean-slide::-webkit-input-placeholder {
  color: #efefef;
  text-indent: 0;
  font-weight: 300;
}

.clean-slide + label {
  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  left: 0;
  bottom: 0;
  padding: 5px 15px;
  font-weight: 700;
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  transition: all .3s ease-in-out, color .3s ease-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
}
.clean-slide + label:after {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
  background: #283055;
  z-index: -1;
  transform: translate(0);
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.clean-slide:focus,
.clean-slide:active {
  color: #283055;
  text-indent: 0;
  background: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.clean-slide:focus::-webkit-input-placeholder,
.clean-slide:active::-webkit-input-placeholder {
  color: #aaa;
}
.clean-slide:focus + label,
.clean-slide:active + label {
  color: #fff;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  transform: translateX(-100%);
}
.clean-slide:focus + label:after,
.clean-slide:active + label:after {
  transform: translate(100%);
}