#frame.signIn{
	/* background: #dcebf2;
	background: -moz-radial-gradient(center, ellipse cover, #dcebf2 0%, #c4deea 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #dcebf2), color-stop(100%, #c4deea));
	background: -webkit-radial-gradient(center, ellipse cover, #dcebf2 0%, #c4deea 100%);
	background: -o-radial-gradient(center, ellipse cover, #dcebf2 0%, #c4deea 100%);
	background: -ms-radial-gradient(center, ellipse cover, #dcebf2 0%, #c4deea 100%);
	background: radial-gradient(ellipse at center, #dcebf2 0%, #c4deea 100%); */
	
	background: #f4f7f8;
	background: -moz-radial-gradient(center, ellipse cover, #f4f7f8 0%, #e4eef2 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, #f4f7f8), color-stop(100%, #e4eef2));
	background: -webkit-radial-gradient(center, ellipse cover, #f4f7f8 0%, #e4eef2 100%);
	background: -o-radial-gradient(center, ellipse cover, #f4f7f8 0%, #e4eef2 100%);
	background: -ms-radial-gradient(center, ellipse cover, #f4f7f8 0%, #e4eef2 100%);
	background: radial-gradient(ellipse at center, #f4f7f8 0%, #e4eef2 100%);
}

#frame.signIn > .centered{
    display: inline-block;
	padding-top: 5%;
}
/* #frame.signIn > .centered{
	-moz-transform: translateX(-50%) translateY(-30%);
	-webkit-transform: translateX(-50%) translateY(-30%);
	-o-transform: translateX(-50%) translateY(-30%);
	-ms-transform: translateX(-50%) translateY(-30%);
	transform: translateX(-50%) translateY(-30%);
	position: absolute; 
	left: 50%;
	top: 30%;
} */
/* #frame.signIn .form{
	max-width: 640px;
	min-height: 100px;
	padding: 20px;
	margin: 0 auto;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
} */
#frame.signIn .form h1{
	display: block;
	background: url("../images/hugelogo.png") no-repeat center top;
	font: 300 32px 'Source Sans Pro', 'Open Sans', sans-serif;
	color: #718084;
	padding: 320px 0 5px;
	margin: 0 0 20px;
	border-bottom: 1px dotted #a3c4cd;
	white-space: nowrap;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
	position: relative;
}
#frame.signIn .form h1:before{
	content: "cCloud";
	display: block;
	position: absolute;
	top: 200px;/* 222px; */
	left: 0;
	right: 0;
	font: 700 64px 'Source Sans Pro', sans-serif;
	color: #fff;
	text-shadow: -1px -1px rgba(0, 141, 205, 0.5);
	text-align: center;
	cursor: default;
}
	#frame.signIn .form .fields {
		margin: 0 auto 20px;
	}
		#frame.signIn .form .fields > div{
			margin: 0 auto;
			margin-bottom: 10px;
		}
	#frame.signIn .form div{
		margin: 0 auto;
		position: relative;
	}

	#frame.signIn .form .field{
		width: 320px;		
	}

		#frame.signIn .form input[type=text],
		#frame.signIn .form input[type=password]{
			position: relative;
			z-index: 2;
			background-color: #fff;
			width: 300px;
			height: 20px;
			padding: 9px 10px;
			vertical-align: middle;
			color: #273f47;
			font: 400 16px/20px 'Open Sans', sans-serif;
			
			border: 1px solid #b9c6cb;
			border-radius: 4px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
		}
		
		#frame.signIn .form input[type=text]:hover,
		#frame.signIn .form input[type=password]:hover{
			border: 1px solid #bcd;
			border: 1px solid #c4d2d7;
		}
		#frame.signIn .form input[type=text]:focus,
		#frame.signIn .form input[type=password]:focus{
			border: 1px solid #60caf4;
		}
		
		#frame.signIn .form .buttons{
			display: block;
			text-align: center;
			white-space: nowrap;
		}
		#frame.signIn .form .alternative{
			display: inline-block;
			font: 400 18px 'Source Sans Pro', 'Open Sans', sans-serif;
			color: #84A5AE;
			vertical-align: middle;
		}
		#frame.signIn .form .resetpassword{
			display: block;
			width: 320px;
			margin: 20px auto 0;
			font: 400 14px 'Source Sans Pro', 'Open Sans', sans-serif;
			color: #84a5ae;
			text-align: center;
			border-top: 1px dotted #a3c4cd;
			padding: 15px 0;
		}
		
		#frame.signIn .form .resetpassword a,
		#frame.signIn .form .alternative a{
			color: #718084;
			margin: 0 5px;
		}
		#frame.signIn .form .resetpassword a:hover,
		#frame.signIn .form .alternative a:hover{
			text-decoration: underline;
			color: #00a6dc;
		}
				#frame.signIn .form .buttons button{
					display: inline-block;
					min-width: 120px;
					font: 400 18px 'Source Sans Pro', 'Open Sans', sans-serif;
					color: #666;
					padding: 13px 30px;
					margin: 0 5px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					border: 1px solid #ddd;
					background: #f2f2f2;
					background: -moz-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f7f7), color-stop(100%, #ededed));
					background: -webkit-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -o-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: -ms-linear-gradient(top, #f8f7f7 0%, #ededed 100%);
					background: linear-gradient(to bottom, #f8f7f7 0%, #ededed 100%);

					cursor: pointer;
					vertical-align: middle;
					-webkit-transition: .1s;
					-moz-transition: .1s;
					-o-transition: .1s;
					transition: .1s;
				}
				#frame.signIn .form .buttons button:hover,
				#frame.signIn .form .buttons button:focus{
					border: 1px solid #ccc;
					background: #f7f7f7;
					background: -moz-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfafa), color-stop(100%, #f1f1f1));
					background: -webkit-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -o-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: -ms-linear-gradient(top, #fcfafa 0%, #f1f1f1 100%);
					background: linear-gradient(to bottom, #fcfafa 0%, #f1f1f1 100%);
				}
				#frame.signIn .form .buttons button:active{
					border: 1px solid #bbb;
					background: #ededed;
					background: -moz-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #f8f7f7));
					background: -webkit-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -o-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: -ms-linear-gradient(top, #ededed 0%, #f8f7f7 100%);
					background: linear-gradient(to bottom, #ededed 0%, #f8f7f7 100%);
				}
				#frame.signIn .form .buttons button.focused{
					background: #1eb3f1;
					background: -moz-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29c0f9), color-stop(100%, #13a4e7));
					background: -webkit-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -o-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: -ms-linear-gradient(top, #29c0f9 0%, #13a4e7 100%);
					background: linear-gradient(to bottom, #29c0f9 0%, #13a4e7 100%);
					color: #fff;
					text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
					border: 1px solid #2092de;
				}
				#frame.signIn .form .buttons button.focused:hover,
				#frame.signIn .form .buttons button.focused:focus{
					border: 1px solid #1082ce;
					background: #29c6ff;
					background: -moz-linear-gradient(top,  #29c6ff 0%, #1bafee 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29c6ff), color-stop(100%,#1bafee));
					background: -webkit-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: -o-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: -ms-linear-gradient(top,  #29c6ff 0%,#1bafee 100%);
					background: linear-gradient(to bottom,  #29c6ff 0%,#1bafee 100%);
				}
				#frame.signIn .form .buttons button.focused:active{
					background: #13a4e7;
					background: -moz-linear-gradient(top, #13a4e7 0%, #29c0f9 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#13a4e7), color-stop(100%,#29c0f9));
					background: -webkit-linear-gradient(top, #13a4e7 0%,#29c0f9 100%);
					background: -o-linear-gradient(top, #13a4e7 0%,#29c0f9 100%);
					background: -ms-linear-gradient(top, #13a4e7 0%,#29c0f9 100%);
					background: linear-gradient(to bottom, #13a4e7 0%,#29c0f9 100%);
				}
#frame.signIn{
	padding-bottom: 70px;
	min-width: 460px;
	min-height: 670px;
	text-align: center;
}

#frame.signIn .form{
	min-width: 310px;
}
	#frame.signIn .form .fields,
	#frame.signIn .form .buttons,
	#frame.signIn .form .resetpassword{
		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		-o-transition: all .4s;
		transition: all .4s;
	}
	#frame.signIn .form.hidden h1{
		border: 0;
	}
	#frame.signIn .form.hidden .fields,
	#frame.signIn .form.hidden .buttons,
	#frame.signIn .form.hidden .resetpassword{
		opacity: 0;
	}

#frame.signIn footer{
	display: block;
	background-color: #202e3b;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px 30px;
	font: 400 14px/28px 'Source Sans Pro', 'Open Sans', sans-serif;
	color: #718084;
}
#frame.signIn footer .left{
	float: left;
}
#frame.signIn footer .right{
	float: right;
}

#frame.signIn footer span{
	margin: 0 5px;
}
#frame.signIn footer a{
	display: inline-block;
	color: #718084;
}
#frame.signIn footer a:hover{
	color: #00a6dc;
}

#frame.signIn footer .signUp{
	display: inline-block;
	padding: 0 10px;
	background-color: #9fc7e0;
	background-color: #284d63;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: middle;
	color: #fff;
	margin-left: 3px;
	-webkit-transition: background-color .2s;
	-moz-transition: background-color .2s;
	-o-transition: background-color .2s;
	transition: background-color .2s;
}
#frame.signIn footer .signUp:hover{
	background-color: #46a3cd;
	background-color: #275c7d;
	color: #fff;
}

@media all and ( max-width: 1190px ){
	#frame.signIn{
		min-height: 760px;
	}
	#frame.signIn footer .left,
	#frame.signIn footer .right{
		float: none;
		text-align: center;
	}
}
@media all and ( max-width: 550px ){
	#frame.signIn{
		min-height: 800px;
	}
}