section > .flex > div {
	width: 50%;
	padding: 0 2%;
}

form input {
	width: 96%;
}

form input.btn, 
form #social-login {
	width: 100%;
}

#social-login .btn {
	padding: 2%;
	text-align: center;
	margin: 0 3%;
	color: #FFF;
}
#social-login .btn .fa {
	position: relative;
}
#social-login .btn .text {
	font-size: .8em;
}
#social-login .btn.gp {
	background: rgb(206,77,57);
}
#social-login .btn.gp:hover {
	background: rgb(251,122,102);
}
#social-login .btn.fb {
	background: rgb(48,88,145);
}
#social-login .btn.fb:hover {
	background: rgb(93,133,190);
}
#social-login .btn.tw {
	background: rgb(44,168,210);
}
#social-login .btn.tw:hover {
	background: rgb(89,213,255);
}
@media (max-width: 600px) {
	#social-login .btn {
		padding: 0;
		width: 60px;
		height: 60px;
	}
	#social-login .btn .text {
		display: none;
	}
	#social-login .btn .fa {
		margin: 18px auto;
	}
}

@media (max-width: 800px) {
	
	section > .flex {
		flex-direction: column;
	}
	section > .flex > div {
		width: 100%;
	}
	hr { display: block; }
	
}