@font-face {
	font-family: "Clashdisplay";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/ClashDisplay-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Clashdisplay";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Ppeditorialnew";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/PPEditorialNew-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Ppeditorialnew";
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");
}

#body-login,
#body-login *,
#body-login *::before,
#body-login *::after {
	animation: none !important;
	scroll-behavior: auto !important;
	transition: none !important;
}

#body-login {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .18) 34%, rgba(255, 255, 255, .06) 64%, rgba(0, 0, 0, .26) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .02) 48%, rgba(0, 0, 0, .48) 100%),
		url("https://pub-caed5bbd9d414479b643eadd0b89ae75.r2.dev/videos/wedding-inspo-final.jpg") center top / cover no-repeat #111 !important;
	color: #f7f5f1;
	display: block !important;
	isolation: isolate;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden !important;
}

#body-login::before,
#body-login::after {
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
}

#body-login::before {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .32), transparent 42%),
		linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .32));
	z-index: 1;
}

#body-login::after {
	background: rgba(244, 241, 235, .05);
	z-index: 2;
}

#body-login .wrapper {
	bottom: auto !important;
	display: block !important;
	height: auto !important;
	left: auto !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	position: fixed !important;
	right: clamp(1.25rem, 5vw, 5rem);
	top: 35%;
	transform: translateY(-50%) !important;
	width: clamp(340px, 29vw, 448px) !important;
	z-index: 8;
}

#body-login .v-align {
	margin: 0 !important;
	max-width: none !important;
	position: relative;
	width: 100%;
	z-index: 9;
}

#body-login #header,
#body-login #header .logo,
#body-login .header-guest {
	display: none !important;
}

#body-login .guest-content {
	background: transparent !important;
	box-shadow: none !important;
	color: #151515 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#body-login #login,
#body-login #login > div,
#body-login #login form,
#body-login .login-box,
#body-login .login-box__wrapper,
#body-login .login-form {
	width: 100%;
}

#body-login #login > div,
#body-login #login form,
#body-login .login-box {
	-webkit-backdrop-filter: blur(22px) saturate(1.08);
	backdrop-filter: blur(22px) saturate(1.08);
	background: rgba(247, 245, 241, .86) !important;
	border: 1px solid rgba(255, 255, 255, .62) !important;
	border-radius: 0 !important;
	box-shadow: 0 28px 90px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .70) !important;
	color: #171717 !important;
	display: block !important;
}

#body-login #login h1,
#body-login #login h2,
#body-login #login label,
#body-login #login p,
#body-login #login span,
#body-login #login strong,
#body-login #login .input-field__label {
	color: #171717 !important;
	text-shadow: none !important;
}

#body-login #login h1,
#body-login #login h2 {
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

#body-login #login a {
	color: #171717 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

#body-login #login input {
	background: rgba(255, 255, 255, .72) !important;
	border: 1px solid rgba(23, 23, 23, .22) !important;
	border-radius: 0 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
	color: #171717 !important;
}

#body-login #login input::placeholder {
	color: rgba(23, 23, 23, .56) !important;
}

#body-login #login button {
	border-radius: 0 !important;
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

#body-login #login button[type="submit"] {
	background: #171717 !important;
	border-color: #171717 !important;
	color: #fff !important;
}

#body-login #login button[type="submit"] span,
#body-login #login button[type="submit"] svg {
	color: #fff !important;
}

#body-login #login button[type="submit"]:disabled {
	background: rgba(23, 23, 23, .42) !important;
	border-color: rgba(23, 23, 23, .16) !important;
	color: rgba(255, 255, 255, .84) !important;
}

#body-login footer.guest-box {
	display: none !important;
}

.mbfx-shell {
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 3;
}

.mbfx-nav {
	align-items: flex-start;
	display: block;
	left: 0;
	padding: clamp(1.6rem, 3vw, 3.25rem) clamp(1.4rem, 4vw, 4.75rem) 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
}

.mbfx-logo {
	display: block;
	pointer-events: auto;
	width: clamp(185px, 17vw, 320px);
}

.mbfx-logo img {
	display: block;
	filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .28));
	height: auto;
	opacity: .86;
	width: 100%;
}

.mbfx-hero-copy {
	bottom: clamp(1.8rem, 5.8vh, 4.6rem);
	left: clamp(1.4rem, 4vw, 4.75rem);
	max-width: calc(100vw - 2rem);
	position: absolute;
	z-index: 4;
}

.mbfx-hero-copy h1 {
	color: rgba(247, 245, 241, .88);
	font-size: clamp(4.8rem, 10.8vw, 12.8rem);
	font-weight: 300;
	letter-spacing: 0;
	line-height: .82;
	margin: 0;
	text-shadow: 0 10px 44px rgba(0, 0, 0, .34);
	white-space: nowrap;
}

.mbfx-script {
	font-family: "Ppeditorialnew", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 200;
	text-transform: none;
}

.mbfx-sans {
	color: rgba(247, 245, 241, .48);
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}

.mbfx-hero-copy p {
	color: rgba(247, 245, 241, .82);
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif;
	font-size: clamp(.78rem, 1vw, 1.05rem);
	font-weight: 300;
	letter-spacing: .18em;
	margin: 1.1rem 0 0 .36rem;
	text-shadow: 0 8px 24px rgba(0, 0, 0, .34);
}

@media (max-width: 1120px) {
	#body-login .wrapper {
		right: clamp(1rem, 3vw, 2rem);
		width: clamp(332px, 36vw, 420px) !important;
	}

	.mbfx-hero-copy {
		max-width: 68vw;
	}

	.mbfx-hero-copy h1 {
		font-size: clamp(4.25rem, 10.2vw, 8.4rem);
		white-space: normal;
	}
}

@media (max-width: 820px) {
	#body-login {
		background-position: 47% top !important;
		overflow: hidden !important;
	}

	#body-login::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 42%, rgba(0, 0, 0, .56)),
			linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .08));
	}

	#body-login .wrapper {
		bottom: 14px !important;
		left: 16px !important;
		right: 16px !important;
		top: auto !important;
		transform: none !important;
		width: auto !important;
	}

	.mbfx-nav {
		padding: 1.35rem 1.4rem 0;
	}

	.mbfx-logo {
		width: clamp(150px, 44vw, 220px);
	}

	.mbfx-hero-copy {
		bottom: auto;
		left: 50%;
		max-width: calc(100vw - 2.5rem);
		right: auto;
		text-align: center;
		top: 9rem;
		transform: translateX(-50%);
		width: calc(100vw - 2.5rem);
	}

	.mbfx-hero-copy h1 {
		font-size: clamp(2.7rem, 12.5vw, 4.7rem);
		line-height: .86;
		white-space: normal;
	}

	.mbfx-hero-copy p {
		font-size: .72rem;
		line-height: 1.35;
		margin-left: auto;
		margin-right: auto;
		margin-top: .75rem;
		max-width: 21rem;
	}
}

@media (max-height: 700px) and (max-width: 820px) {
	.mbfx-hero-copy {
		display: none;
	}
}

@media (max-height: 640px) and (min-width: 821px) {
	.mbfx-hero-copy p {
		display: none;
	}

	.mbfx-hero-copy h1 {
		font-size: clamp(4rem, 8vw, 8rem);
	}
}

#body-login .login-form,
#body-login .login-form__fieldset,
#body-login .login-box,
#body-login .login-box__wrapper {
	color: #171717 !important;
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif !important;
}

#body-login .login-form__headline,
#body-login .login-form label,
#body-login .login-form p,
#body-login .login-form span,
#body-login .login-form strong {
	color: #171717 !important;
	letter-spacing: 0 !important;
	text-shadow: none !important;
}

#body-login .login-form input.input-field__input {
	background: rgba(255, 255, 255, .72) !important;
	border: 1px solid rgba(23, 23, 23, .22) !important;
	border-radius: 0 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
	color: #171717 !important;
}

#body-login .login-form input.input-field__input::placeholder {
	color: rgba(23, 23, 23, .56) !important;
}

#body-login .login-form button.button-vue {
	border-radius: 0 !important;
	font-family: "Clashdisplay", Helvetica, Arial, sans-serif !important;
	letter-spacing: 0 !important;
}

#body-login .login-form button[type="submit"].button-vue,
#body-login .login-form .button-vue--vue-primary {
	background: #171717 !important;
	border-color: #171717 !important;
	color: #fff !important;
}

#body-login .login-form button[type="submit"].button-vue *,
#body-login .login-form .button-vue--vue-primary * {
	color: #fff !important;
}

#body-login .login-form button[type="submit"].button-vue:disabled,
#body-login .login-form .button-vue--vue-primary:disabled {
	background: rgba(23, 23, 23, .42) !important;
	border-color: rgba(23, 23, 23, .16) !important;
	color: rgba(255, 255, 255, .84) !important;
}

#body-login .mbfx-menu {
	display: none !important;
}
