/*------------------------------------------------*/
/*	Page: Authentication (login, register)
/*------------------------------------------------*/

.btn-auth-facebook {
	background-color: #3B5998;
	color: #fff;
	position: relative;
	width: 100%;
	height: 40px;
	padding-left: 40px;

	&:hover,
	&:focus {
		color: #fff;
		background-color: darken(#3B5998, 3%);
	}

	&:before {
		font-family: FontAwesome;
		font-size: 20px;
		content: "\f09a";
		display: block;
		position: absolute;
		top: -1px;
		left: -1px;
		padding: 7px 0;
		width: 40px;
		height: 40px;
		background-color: darken(#3B5998, 10%);	
	}

	@include min-screen($break-small) {
		width: 50%;
	}

	@include min-screen($break-medium) {
		width: 30%;
	}
}

.page-auth {
	.logo {
		margin-bottom: 40px;
	}
	
	.separator {
		margin: 30px auto;
		position: relative;
		width: 100%;

		&:before {
			@include inline-block;

			content: "";
			vertical-align: middle;
			height: 0;
			border-top: 1px solid $line-color;
			position: absolute;
			top: 9px;
			left: 10px;
			right: 10px;
		}

		span {
			@include inline-block;

			position: relative;
			background-color: $body-bg-color;
			padding: 0 8px;
		}

		@include min-screen($break-small) {
			width: 50%;
		}

		@include min-screen($break-medium) {
			width: 31%;
		}
	}

	.center-block {
		width: 100%;
		border: 1px solid $line-color;
		padding: 25px;
		text-align: left;
		background-color: #f1f1f1;

		.title {
			font-size: 1.2em;
			line-height: 1;
			margin-bottom: 15px;
		}

		form > input {
			margin-bottom: 15px;

			&:focus {
				border-color: #ccc;
			}
		}
		
		.btn-auth {
			margin-top: 20px;
		}

		.links {
			margin-top: 30px;
			text-align: center;
			
			p {
				margin-bottom: 0;
				font-size: 0.9em;

				a:hover {
					text-decoration: none;
				}
			}
		}

		@include min-screen($break-small) {
			width: 50%;
		}

		@include min-screen($break-medium) {
			width: 30%;
		}
	}
}


