html, body{
	
	margin:0;
	padding:0;
	height:100%;
	font-family: 'Open Sans', sans-serif;
	
}

div.login{
	
	width:500px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-200px;
	box-shadow:2px 3px 15px 3px #666;
	
}

div.login header{
	
	display:block;
	height:80px;
	width:100%;
	text-align:center;
	box-sizing:border-box;
	
}

div.login header img{
	
	margin:0px auto !important;
	height:70px !important;
	max-height:100% !important;
	max-width:100% !important;
	width:auto !important;
	
}

div.login header h1{
	
	margin:0;
	font-size:34px;
	height:80px;
	text-align:center;
	font-weight:300;
	display:block;
	width:100%;
	padding-top:5px;
	box-sizing:border-box;
	line-height:80px;
	
}

div.login form{
	
	display:block;
	clear:both;
	width:100%;
	height:auto;
	padding:20px;
	box-sizing:border-box;
	margin:0;
	
}

div.login form span.input_span{
	
	width:100%;
	display:block;
	height:50px;
	clear:both;
	position:relative;
	margin-bottom:30px;
	
}

div.login form input[type="text"], div.login form input[type="password"], div.login form input[type="email"]{
	
	width:100%;
	height:50px;
	line-height:50px;
	box-sizing:border-box;
	padding-left:60px;
	font-size:16px;
	outline:none;
	border:1px solid #ddd;
	
}

div.login form span.input_span.username:before{
	
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	content: "\f007";
	font-size:24px;
	width:50px;
	color:#666;
	height:50px;
	line-height:50px;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	border-right:1px solid #ddd;
	
}

div.login form span.input_span.password:before{
	
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	content: "\f084";
	font-size:24px;
	width:50px;
	color:#666;
	height:50px;
	line-height:50px;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	border-right:1px solid #ddd;
	
}

div.login form span.input_span.email:before{
	
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	content: "\f0e0";
	font-size:24px;
	width:50px;
	color:#666;
	height:50px;
	line-height:50px;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	border-right:1px solid #ddd;
	
}


div.login form span.input_span.token:before{
	
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	content: "\f029";
	font-size:24px;
	width:50px;
	color:#666;
	height:50px;
	line-height:50px;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	border-right:1px solid #ddd;
	
}

div.login form button{
	
	width:200px;
	height:50px;
	border:none;
	font-size:22px;
	font-weight:300;
	font-family: 'Open Sans', sans-serif;
	text-align:center;
	line-height:50px;
	display:block;
	margin:0 auto;
	position:relative;
	text-transform:uppercase;
	
}

div.login form button:disabled{
	
	opacity:0.5;
	
}

div.special_login_ajax_span{
	
	width:100%;
	height:100%;
	background-color:rgba( 255, 255, 255, 0.5 );
	background-image:url( /templates/modal2/assets/images/spinner.gif );
	background-repeat:no-repeat;
	background-position:center center;
	background-size:30px 30px;
	opacity:0;
	position:absolute;
	
}

div.login footer{
	
	height:70px;
	width:100%;
	display:block;
	box-sizing:border-box;
	line-height:70px;
	position:relative;
	
}

div.login footer section.forgotPassword{
	
	position:absolute;
	left:0;
	top:0;
	height:70px;
	width:200px;
	padding:0 20px;
	font-size:15px;
	cursor:pointer;
	
}

div.login footer section.oauth{
	
	position:absolute;
	right:0;
	top:0;
	height:70px;
	width:70px;
	font-size:40px;
	line-height:70px;
	text-align:center;
	cursor:pointer;
	
}

@media(max-width:500px){
	
	div.login{
		
		width:95%;
		left:2.5%;
		margin-left:0;
		
	}
	
	
	div.login header h1{
		
		font-size:24px;
		
	}
	
	
	div.login form span.input_span.username:before{
		
		font-size:18px;
		
	}
	
	div.login form span.input_span.password:before{
		
		font-size:18px;
	}
	
}