.contact-slideout-wrapper {
	display: flex;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	margin: 0 auto;
	align-items: center;
	position: fixed;
	top: 0;
	right: -300px;
	z-index: 11;
}

.contact-slideout-wrapper .button {
	position: absolute;
	left: -115px;
	width: 180px;
	height: 60px;
	z-index: 1;
}

.contact-slideout {
	position: relative;
	width: 300px;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	padding: 4rem 2rem 2rem;
	color: var(--white);
	border-top-left-radius: 0.2rem;
	border-bottom-left-radius: 0.2rem;
	background-color: var(--red);
	text-align: center;
	z-index: 2;
}

.image-mask {
	max-width: 100px;
	clip-path: url(#circle);
	overflow: hidden;
}

.logomark {
	max-width: 150px;
	margin-top: 4rem;
}

.contact-slideout h3 {
	font-family: "Lilita One", Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.contact-slideout a {
	color: var(--white);
}

.contact-slideout a:hover {
	color: var(--black);
}

.contact-slideout a:focus {
	color: var(--black);
}

.contact-slideout .social-icons {
	justify-content: center;
}

.slidein {
	animation-duration: 10ms;
	animation-name: slidein;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
	.slidein {
		animation-duration: 250ms;
	}
}

.slideout {
	animation-duration: 10ms;
	animation-name: slideout;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
	.slideout {
		animation-duration: 250ms;
	}
}

@keyframes slidein {
	from {
		right: -300px;
	}

	to {
		right: 0;
	}
}

@keyframes slideout {
	from {
		right: 0;
	}

	to {
		right: -300px;
	}
}