body {
	font-weight: 300
}
#loader>div, #lock {
	width: 300px;
	height: 300px
}
#loader>div, #lock svg {
	position: relative
}
form, form h1 {
	box-sizing: border-box
}
#lock svg, form, form input {
	display: block
}
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e5e4e1;
	z-index: 99
}
#loader>div {
	top: 35%;
	margin: -150px auto 0
}
#lock, #signin {
	position: absolute
}
#lock, .lock-circle, .lock-top, form {
	margin: 0 auto
}
#lock {
	z-index: 9;
	background-color: transparent;
	padding: 15px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.lock-top {
	width: 90%;
	min-height: 230px;
	overflow: visible!important;
	top: 0;
	right: 3px
}
.lock-top path {
	transform: translateY(10px)
}
.lock-circle {
	width: 50%;
	cursor: pointer;
	top: -90px
}
.animated {
	animation-duration: 1.1s;
	animation-fill-mode: both
}
@keyframes customAnimation {
0% {
transform:translateY(10px);
visibility:visible
}
20%, 25% {
transform:translateY(13px)
}
40% {
transform:translateY(-27px) rotateY(0);
transform-origin:center right
}
100% {
transform:translateY(-20px) rotateY(180deg);
transform-origin:center right
}
}
.customAnimation {
	animation-name: customAnimation
}
#signin {
	z-index: 10
}
form {
	overflow-y: hidden;
	width: 300px;
	box-shadow: 2px 2px 5px 1px rgba(0,0,0,.2);
	padding-bottom: 40px;
	border-radius: 3px;
	background-color: #fff
}
form button, form input {
	border: none;
	width: 240px
}
form h1 {
	padding: 20px 20px 0;
	text-align: center;
	font-size: 31px;
	font-weight: 500;
}
form input {
	margin: 40px 25px;
	padding: 10px 0;
	border-bottom: solid 1px #1abc9c;
	-webkit-transition: all .3s cubic-bezier(.64, .09, .08, 1);
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 96%, #1abc9c 4%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #1abc9c 4%);
	background-position: -240px 0;
	background-size: 240px 100%;
	background-repeat: no-repeat;
	color: #0e6252;
	font-size: 20px
}
form .error-message{
	display: none;
	text-align: center;
	color: red;
	font-size: 16px;
}
form input:focus, form input:valid {
box-shadow:none;
outline:0;
background-position:0 0
}
form input:focus::-webkit-input-placeholder, form input:valid::-webkit-input-placeholder {
color:#1abc9c;
font-size:14px;
-webkit-transform:translateY(-20px);
transform:translateY(-20px);
visibility:visible!important;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
transition:all .2s ease-in-out
}
form button {
	background-color: #1abc9c;
	cursor: pointer;
	border-radius: 3px;
	padding: 6px;
	color: #fff;
	margin-left: 25px;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,.2);
	font-size: 20px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
form button:hover {
	background-color: #18c3a2;
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	box-shadow: 0 6px 6px 0 rgba(0,0,0,.2)
}