/*******************
LOGIN FORM STYLESHEET
by: Amit Jakhu
www.amitjakhu.com
*******************/

/*******************
FONTS
*******************/

@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

/*******************
SELECTION STYLING
*******************/

::selection {
	color: #fff;
	background: #D0E156; /* Safari */
}
::-moz-selection {
	color: #fff;
	background: #D0E156; /* Firefox */
}

/*******************
BODY STYLING
*******************/

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background-color: #121B31;
	font-family: 'Work Sans';
	font-weight:300;
	text-align: left;
	text-decoration: none;
}
.loginheading{
	color:#D0E156;
	text-align: center;
	letter-spacing: 0.3em;
	margin-bottom:10px;
}
#wrapper {
	/* Center wrapper perfectly */
	background-image: url("M190 100c0 49.6-40.4 90-90 90s-90-40.4-90-90c0-24.1 9.4-46.7 26.3-63.7 1.5-1.5 3.9-1.5 5.4 0 1.5 1.5 1.5 3.9 0 5.4-15.5 15.6-24 36.3-24 58.3 0 45.4 37 82.3 82.3 82.3s82.3-37 82.3-82.3-37-82.3-82.3-82.3c-2.1 0-3.8-1.7-3.8-3.8S97.9 10 100 10c49.6 0 90 40.4 90 90zM19.6 30.8l31.6-3.9-3.9 31.6c-.2 2.1 1.3 4 3.3 4.3h.4c1.9 0 3.5-1.4 3.8-3.3L59.4 23c.1-1.2-.2-2.3-1.1-3.2s-2-1.3-3.2-1.1l-36.5 4.6c-2.1.2-3.6 2.1-3.3 4.3.2 2 2.2 3.5 4.3 3.2zm118.2 94.1c.4.2 1 .2 1.4.2 1.5 0 3-1 3.5-2.4l13.7-35.5c.4-1.2.3-2.6-.4-3.6s-1.9-1.7-3.2-1.7h-19.6c-1.9 0-3.6 1.3-3.8 3.2-.3 2.4 1.5 4.2 3.8 4.2h14l-11.7 30.4c-.6 2.1.4 4.5 2.3 5.2zm-23.3-42.8c-2 .6-3.2 2.8-2.6 4.8l10.7 35.5c.5 1.7 2 2.8 3.6 2.8.3 0 .7 0 1.1-.2 2-.6 3.2-2.8 2.6-4.8l-10.7-35.5c-.6-2.1-2.7-3.2-4.7-2.6zM51.4 92.3c-.6 2 .4 4.2 2.5 4.8 2 .6 4.2-.4 4.8-2.4 0 0 1.7-5 6.7-5 2.4 0 4.5 1.3 5.4 3.4 1.2 2.7.3 6-2.3 8.8-7.3 7.9-16.2 17.7-16.3 17.8-1 1.2-1.3 2.4-.6 3.8.6 1.4 2 2 3.5 2h20.8c1.9 0 3.6-1.3 3.8-3.2.3-2.4-1.5-4.2-3.8-4.2H63.8c3.1-3.2 6.9-7.3 10.4-11.2 4.7-5 6.2-11.5 3.7-17-2.1-5-6.9-8-12.5-8-8.4 0-12.8 6.8-14 10.4zm53.4-6.1v22.3h2.9c1.9 0 3.6 1.3 3.8 3.2.3 2.4-1.5 4.2-3.8 4.2h-3v5.7c0 1.9-1.3 3.6-3.2 3.8-2.4.3-4.2-1.5-4.2-3.8V116H83.1c-1.4 0-2.8-.4-3.4-1.6-.6-1.3-.6-2.4.2-3.6l17.8-26.5c1-1.4 2.8-2 4.4-1.5 1.5.3 2.7 1.7 2.7 3.4zm-7.5 12.6l-7.1 9.7h7.1v-9.7z");
	width: 300px;
	height: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -200px;
}

/*
.gradient {
	width: 600px;
	height: 600px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	
	background: url(../images/gradient.png) no-repeat;
}
*/

/* .gradient {
	/* Center Positioning */
	/* width: 600px;
	height: 600px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	 */
	/* Fallback */ 
	/* background-image: url(../images/gradient.png);  */
	/* background-repeat: no-repeat;  */
	
	/* CSS3 Gradient */
	/* background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
	background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
	background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
	background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
	background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0)); */
/* } * */

/*******************
LOGIN FORM
*******************/

.login-form {
	width: 300px;
	margin: 0 auto;
	position: relative;
	z-index:5;
	
	background: #D0E156;
	border: 1px solid #121B31;
	/* border-radius: 5px; */
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/*******************
HEADER
*******************/

.login-form .header {
	padding: 40px 30px 30px 30px;
}

.login-form .header h1 {
	font-weight: 600;
	font-size: 28px;
	line-height:34px;
	color: #414848;
	/* text-shadow: 1px 1px 0 rgba(256,256,256,1.0); */
	margin-bottom: 10px;
}

.login-form .header span {
	font-size: 13px;
	line-height: 16px;
	color: black;
	/* text-shadow: 1px 1px 0 rgba(256,256,256,1.0); */
}

/*******************
CONTENT
*******************/
.svgicon{
	width:150px;
	margin-top: 250px;
}
.login-form .content {
	padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .content .input {
	width: 188px;
	padding: 15px 25px;
	
	font-family: 'Josefin Sans';
	font-weight: 400;
	font-size: 14px;
	color: #9d9e9e;
	/* text-shadow: 1px 1px 0 rgba(256,256,256,1.0); */
	
	background: #fff;
	border: 1px solid rgb(0, 0, 0);
	/* border-radius: 5px; */
	
	/* box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); */
}

/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
	margin-top: 25px;
}

.login-form .content .input:hover {
	background: #dfe9ec;
	color: #414848;
}

.login-form .content .input:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.user-icon, .pass-icon {
	width: 46px;
	height: 47px;
	display: block;
	position: absolute;
	left: 0px;
	padding-right: 2px;
	z-index: 3;
	
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

.user-icon {
	top:147px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
	background: rgba(65,72,72,0.75) url(../images/user-icon.png) no-repeat center;	
}

.pass-icon {
	top:221px;
	background: rgba(65,72,72,0.75) url(../images/pass-icon.png) no-repeat center;
}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

/*******************
FOOTER
*******************/

.login-form .footer {
	padding: 25px 30px 40px 30px;
	overflow: auto;
	
	background: #D0E156;
	border-top: 1px solid #D0E156;
	
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

/* Login button */
.login-form .footer .button {
	float:right;
	padding: 11px 25px;
	
	font-family: 'Work Sans';
	font-weight: 300;
	font-size: 18px;
	color: white;
	/* text-shadow: 0px 1px 0 rgba(0,0,0,0.25); */
	
	background: #121B31;
	border: 1px solid #121B31;
	/* border-radius: 5px; */
	cursor: pointer;
	
	/* box-shadow: inset 0 0 2px rgba(256,256,256,0.75); */
	/* -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75); */
	/* -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75); */
}

.login-form .footer .button:hover {
	background-color: black;
	color:white;
	border: 1px solid black;
	
	/* box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); */
	/* -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); */
	/* -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); */
}

.login-form .footer .button:focus {
	position: relative;
	bottom: -1px;
	
	background: #121B31;
	color:white;
	
	box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

/* Register button */
.login-form .footer .register {
	display: block;
	float: right;
	padding: 10px;
	margin-right: 20px;
	
	background: none;
	border: none;
	cursor: pointer;
	
	font-family: 'Josefin Sans';
	font-weight: 300;
	font-size: 18px;
	color: #414848;
	/* text-shadow: 0px 1px 0 rgba(256,256,256,0.5); */
}

.login-form .footer .register:hover {
	color: #3f9db8;
}

.login-form .footer .register:focus {
	position: relative;
	bottom: -1px;
}