/* Forms
 * ---------------------------------------------------------------------------------------------------------------------
 */

form.login > div > div {
	padding-bottom: 15px;
}

.contact-form {
	margin-top: 30px;
}

.contact-form .input-block {
	position: relative;
	width: 100%;
	height: 60px;
	margin-bottom: 1rem;
	padding: 1rem;

	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid #222;

	transition: all 0.3s ease-out;
}

.contact-form .input-block.focus {
	background-color: #fff;
	border-color: #fb2900;
}

/* Textarea Variant */
.contact-form .input-block.textarea {
	height: auto;
}

.contact-form .input-block.textarea .form-control {
	height: auto;
	resize: none;
}

/* -----------------------------------------------------
   Label (Floating / Sliding)
   ----------------------------------------------------- */

.contact-form .input-block label {
	position: absolute;
	top: 25px;
	left: 15px;
	z-index: 1;

	margin: 0;

	font-size: 18px;
	font-weight: 300;
	line-height: 10px;
	color: #333;

	opacity: 0.75;
	transform: translateX(0);
	transform-origin: left center;

	transition: transform 0.25s ease,
	font-size 0.25s ease,
	opacity 0.2s ease,
	top 0.25s ease;

	pointer-events: none;
}

/* Active / Focus State */
.contact-form .input-block.focus label {
	top: 7px;
	font-size: 12px;
	opacity: 1;
	transform: translateX(-6px);
}

/* -----------------------------------------------------
   Form Control
   ----------------------------------------------------- */

.contact-form .input-block .form-control {
	position: relative;
	z-index: 2;

	background-color: transparent;
	border: none;
	padding: 0;
	line-height: 2;
	font-size: 18px;
	color: #333;

	border-radius: 0;
	box-shadow: none;
}

/* -----------------------------------------------------
   Checkbox
   ----------------------------------------------------- */

.contact-form .form-check {
	padding-bottom: 15px;
}

/* -----------------------------------------------------
   Submit Button
   ----------------------------------------------------- */

.contact-form button {
	border: 1px solid #222;
	height: 60px;
}


/* =====================================================
   Login Form (unchanged, just grouped)
   ===================================================== */

.login-form > div {
	display: inline-block;
}

.login-form > div > label {
	display: none;
}

.loginform {
	display: inline-block;
	width: 100%;
	padding-bottom: 0.75rem;
}

.loginform .btn {
	float: right;
	margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.contact-form .input-block,
	.contact-form .input-block label {
		transition: none;
	}
}