@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400');

* {
	font-family 			: 'Source Sans Pro', sans-serif;
	font-weight 			: 300;
	color 					: #FFF;
	font-size 				: 20px;
	-webkit-user-select 	: none;
	-moz-user-select 		: none;
	-ms-user-select 		: none;
}

html, body {
	margin 					: 0px;
	padding 				: 0px;
}

body {
	background 				: url("../img/login.png") no-repeat center center fixed;
	background-size 		: cover;
}

h1 {
	font-size 				: 1.8em;
}

input {
	padding 				: 10px;
	border 					: none;
	border-radius 			: 3px;
	box-sizing 				: border-box;
	font-size 				: 0.8em;
	outline 				: none;
	transition 				: all 0.2s ease-in-out;
	color 					: #000;
	-webkit-user-select 	: text;
	-moz-user-select 		: text;
	-ms-user-select 		: text;
}

input.error {
	border 					: 2px solid #ad0000
}

input:focus {
	box-shadow 				: inset 0px 0px 5px 1px #B1B1B1;
}

button {
	padding 				: 10px 15px;
}

button.plain {
	background 				: transparent;
	border 					: none;
	color 					: #FFF;
	font-weight 			: bold;
	font-size 				: 0.8em;
	outline 				: none;
}

button.plain:hover {
	cursor 					: pointer;
}

button.action {
	cursor 					: pointer;
	position 				: relative;
	padding 				: 8px;
	background 				: linear-gradient(to bottom, #3498DB, #2980B9) #3498DB;
	border 					: none;
	border-radius 			: 3px;
	z-index 				: 100;
	outline 				: none;
}

button.action:before {
	content 				: '';
	position 				: absolute;
	top 					: 0;
	left 					: 0;
	width 					: 100%;
	height 					: 100%;
	z-index 				: -100;
	border-radius 			: inherit;
	background 				: linear-gradient(to bottom, #3CB0FD, #3498DB) #3CB0FD;
	opacity 				: 0;
	transition 				: all 0.2s ease-in-out;
}

button.action:hover:before {
	opacity 				: 1;
}

button.action.red {
	background 				: linear-gradient(to bottom, #b92938, #b92938) #b92938;
}

button.action.red:before {
	background 				: linear-gradient(to bottom, #fd3c50, #db3445) #fd3c50;
}

button i {
	margin-right 			: 5px;
}

p.error-msg {
	visibility 				: hidden;
	padding 				: 5px;
	margin 					: 0px;
	background 				: #bd0000;
	color 					: #FFF;
	font-size 				: 0.8em;
	border-radius 			: 3px;
	transition 				: all 0.2s ease-in-out;
}

p.error-msg.success {
	background 				: #00bd5f;
}

.clear {
	clear 					: both;
}

/**
 * Animations
 */
.fadeOut, .fadeIn {
	animation-name 			: fadeout;
	animation-duration 		: 0.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode 	: forwards;
	animation-delay 		: 0s;
}

.fadeIn {
	animation-name 			: fadein;
	animation-delay 		: 0.2s;
}

@keyframes fadeout {
	0% {
		opacity 			: 1;
		visibility 			: visible;
	}

	100% {
		opacity 			: 0;
		visibility 			: hidden;
	}
}

@keyframes fadein {
	0% {
		opacity 			: 0;
		visibility 			: hidden;
	}

	100% {
		opacity 			: 1;
		visibility 			: visible;
	}
}

@keyframes fadeblurin {
	0% {
		filter 				: blur(0px);
	}

	100% {
		filter 				: blur(2px);
	}
}

@keyframes fadeblurout {
	0% {
		filter 				: blur(2px);
	}

	100% {
		filter 				: blur(0px);
	}
}

@media (min-width: 500px) {
	* {
		font-size 			: 16px;
	}

	input {
		padding 			: 5px 10px;
	}

	button {
		padding 			: 0px;
	}
}