/*Form - Contact*/
.form-contact
{
	background-color:var(--basic-100);
	padding:64px 100px;
	margin-bottom:128px;
}
@media all and (max-width:575px)
{
	.form-contact
	{
		padding-inline:32px;
	}
}

/*Form - Input*/
.form-item
{
	display:inline-block;
	width:100%;
	position:relative;
	margin-bottom:20px;
}
.form-item input:not([type="checkbox"], [type="radio"]),
.form-item textarea
{
	width:50% !important;
	height:56px;
	color:var(--basic-900);
	font-size:1.6rem;
	border:1px solid var(--basic-200);
	border-radius:8px;
	background-color:var(--basic-0);
	background-clip:padding-box;
	box-shadow:0 0 0 2px var(--basic-100);
	padding:16px 12px;
	appearance:none;
	transition:background-color 0.2s ease-in-out;
}
.form-item textarea
{
	width:100% !important;
	height:auto;
	min-height:160px;
	word-break:break-word;
}
.form-item input::placeholder,
.form-item textarea::placeholder
{
	color:transparent;
	font-size:0;
}
@media all and (max-width:767px)
{
	.form-item input:not([type="checkbox"], [type="radio"]),
	.form-item textarea
	{
		width:100% !important;
	}
}

/*Form - Checkbox*/
.form-item input[type="checkbox"] ~ label
{
	display:inline-block !important;
	color:var(--basic-500);
	font-size:1.6rem;
	padding-left:36px;
	margin-bottom:4px;
	position:relative;
	z-index:1;
	cursor:pointer;
}
.form-item input[type="checkbox"] ~ label::before
{
	content:'';
	display:block;
	width:28px;
	height:28px;
	border:1px solid var(--basic-200);
	border-radius:4px;
	background-color:var(--basic-0);
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
	z-index:1;
}
.form-item input[type="checkbox"] ~ label::after
{
	content:'\e015';

	color:var(--basic-0);
	font-family:'Font Awesome Kit';
	font-size:2.4rem;
	line-height:1;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	text-rendering:auto;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;

	display:none;
	justify-content:center;
	align-items:center;
	width:28px;
	height:28px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
	z-index:2;
}
.form-item input[type="checkbox"]:checked ~ label::before
{
	border-color:var(--primary-100);
	background-color:var(--primary-100);
}
.form-item input[type="checkbox"]:checked ~ label::after
{
	display:flex;
}

/*Form - Label*/
.form-item input:not([type="checkbox"], [type="radio"]) ~ label,
.form-item textarea ~ label
{
	color:var(--basic-500);
	font-size:1.6rem;
	padding-inline:4px;
	position:absolute;
	top:16px;
	transform:translateY(0);
	left:12px;
	z-index:1;
	pointer-events:none;
	transition:transform var(--transition-fast);
}
.form-item label::after
{
	content:'';
	width:0;
	height:100%;
	background:transparent;
	position:absolute;
	top:calc(50% + 1px);
	transform:translateY(-50%);
	right:0;
	z-index:-1;
	transition:all var(--transition-fast);
}
.form-item label .form-required
{
	color:var(--primary-100);
}

/*Form - Label - Focus*/
.form-item input:not([type="file"], [type="checkbox"], [type="radio"]):focus ~ label,
.form-item input:not([type="file"], [type="checkbox"], [type="radio"]) ~ label.focused,
.form-item input[type="date"] ~ label,
.form-item input[type="time"] ~ label,
.form-item input[type="datetime-local"] ~ label,
.form-item textarea:focus ~ label,
.form-item textarea ~ label.focused
{
	font-size:1.2rem;
	line-height:1;
	font-weight:700;
	text-transform:uppercase;
	transform:translateY(-24px);
	transition:all var(--transition-fast);
}
.form-item input:not([type="file"], [type="checkbox"], [type="radio"]):focus ~ label::after,
.form-item input:not([type="file"], [type="checkbox"], [type="radio"]) ~ label.focused::after,
.form-item input[type="date"] ~ label::after,
.form-item input[type="time"] ~ label::after,
.form-item input[type="datetime-local"] ~ label::after,
.form-item textarea:focus ~ label::after,
.form-item textarea ~ label.focused::after
{
	width:100%;
	background:linear-gradient(0deg, var(--basic-0) 0%, var(--basic-0) calc(1.2rem / 2 - 1px), transparent calc(1.2rem / 2 - 1px), transparent 100%);
	transition:all var(--transition-fast);
}

/*Form - Submit*/
.form-contact .form-submit
{
	display:inline-flex;
	justify-content:flex-end;
	align-items:center;
	min-width:135px;
	height:56px;
	color:var(--basic-0);
	font-size:2.4rem;
	background-color:var(--primary-100);
	box-shadow:var(--shadow);
	padding:16px 24px;
	position:relative;
}
.form-contact .form-submit .btn
{
	display:inline-block;
	width:100%;
	color:var(--basic-0);
	font-size:1.4rem;
	font-weight:700;
	letter-spacing:0.08rem;
	text-transform:uppercase;
	text-align:left;
	background-color:transparent;
	padding:16px 24px;
	position:absolute;
	inset:0;
}

/*Form - Error*/
.form-contact .formError .formErrorArrow
{
	display:none;
}
.form-contact .formError .formErrorContent
{
	min-width:210px;
	color:var(--basic-800);
	font-size:1.2rem;
	line-height:1.5;
	font-family:Poppins, Arial, Helvetica, sans-serif;
	border:0;
	border-radius:8px;
	background-color:var(--basic-0);
	box-shadow:var(--shadow);
	padding:12px;
	margin-top:0;
	transform:translate(64px, 56px);
}
.form-contact table td .formError .formErrorContent
{
	margin-top:-12px;
}
@media all and (max-width:767px)
{
	.form-contact .formError .formErrorContent
	{
		transform:none;
	}
}