.modal-open-icn {
	position: fixed;
	right: 12px;
	bottom: 12px;
	width: 72px;
	height: 72px;
	display: inline-block;
	border: none;
	border-radius: 50%;
	outline: 1px var(--Black);
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72Z' fill='black'/><path fill-rule='evenodd' clip-rule='evenodd' d='M54 36.01C54 27.34 45.507 21 36 21C26.552 21 18 27.293 18 36.01C18 45.089 28.098 53.566 41.952 50.196C44.468 51.738 50.016 53.295 53.919 54C52.464 51.132 50.847 47.193 50.929 44.448C52.9054 42.0795 53.9917 39.0947 54 36.01V36.01ZM28.5 39C29.2956 39 30.0587 38.6839 30.6213 38.1213C31.1839 37.5587 31.5 36.7956 31.5 36C31.5 35.2044 31.1839 34.4413 30.6213 33.8787C30.0587 33.3161 29.2956 33 28.5 33C27.7044 33 26.9413 33.3161 26.3787 33.8787C25.8161 34.4413 25.5 35.2044 25.5 36C25.5 36.7956 25.8161 37.5587 26.3787 38.1213C26.9413 38.6839 27.7044 39 28.5 39ZM39 36C39 36.7956 38.6839 37.5587 38.1213 38.1213C37.5587 38.6839 36.7956 39 36 39C35.2044 39 34.4413 38.6839 33.8787 38.1213C33.3161 37.5587 33 36.7956 33 36C33 35.2044 33.3161 34.4413 33.8787 33.8787C34.4413 33.3161 35.2044 33 36 33C36.7956 33 37.5587 33.3161 38.1213 33.8787C38.6839 34.4413 39 35.2044 39 36ZM43.5 39C44.2956 39 45.0587 38.6839 45.6213 38.1213C46.1839 37.5587 46.5 36.7956 46.5 36C46.5 35.2044 46.1839 34.4413 45.6213 33.8787C45.0587 33.3161 44.2956 33 43.5 33C42.7044 33 41.9413 33.3161 41.3787 33.8787C40.8161 34.4413 40.5 35.2044 40.5 36C40.5 36.7956 40.8161 37.5587 41.3787 38.1213C41.9413 38.6839 42.7044 39 43.5 39Z' fill='white'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-color: var(--Gray80);
	box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.15);
	cursor: pointer;
	z-index: 4;
	transition: transform 100ms;
}

.modal-open-icn:hover {
	transform: scale(1.04);
}

.modal-open-icn:active {
	transform: scale(0.99);
}

.opened .modal-wrapper {
	display: block;
	animation: Open 400ms ease-in normal forwards;
}

.animation .modal-wrapper {
	animation: Close 300ms ease-in normal forwards;
}

@keyframes Open {
	0% {
		opacity: 0;
		transform: scale(0.97);
	}

	50% {
		opacity: 0;
		filter: blur(1px);
		transform: scale(0.97);
	}

	75% {
		opacity: 1;
		filter: blur(0);
		transform: scale(0.98);
	}

	100% {
		opacity: 1;
        transform: scale(1);
	}
}

@keyframes Close {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(0.98);
	}

	75% {
		opacity: 0;
		filter: blur(1px);
		transform: scale(0.97);
	}

	100% {
		opacity: 0;
		transform: scale(0.97);
	}
}

#modal.wait .modal-wrapper {
	cursor: default;
}

.modal-wrapper {
	display: none;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 520px;
	height: 583px;
	padding: 0 40px;
	background-color: var(--White);
	margin: auto;
	box-sizing: border-box;
	z-index: 8;
}

#modal.wait .modal-wrapper * {
	pointer-events: none;
}

.modal-close-icn {
	position: absolute;
	top: 14px;
	right: 20px;
	min-width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 1;
	transition: opacity var(--hover-out);
}

.modal-close-icn:hover {
	opacity: 0.7;
	transition: opacity var(--hover-in);
}

.modal-close-icn svg {
	fill: var(--Black);
	width: 16px;
}

#modal-layout-1 {
	display: none;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-height: 100%;
}

.modal-wrapper.layout-1 #modal-layout-1 {
	display: block;
}

#modal .modal-title {
	padding-bottom: 0;
}

#modal-layout-1 .modal-title {
	text-align: left;
	margin-top: 27px;
}

.modal-lead {
	font-size: var(--Body-Low);
	line-height: 1.4;
	font-weight: 200;
}

#modal-layout-1 .modal-lead {
	margin-top: 18px;
}

.modal-form {
	display: flex;
	flex-flow: column;
	margin-top: 22px;
}

form.modal-form p {
    display: flex;
    flex-flow: wrap;
}

.modal-form input, .modal-form textarea {
	font-size: var(--Body-Low);
	font-weight: 300;
	width: 100%;
	border: none;
	border-radius: 0;
	background-color: var(--Gray6);
	-webkit-appearance: none;
	margin-top: 18px;
	box-sizing: border-box;
	transition: background-color var(--hover-out);
}

.modal-form input {
	height: 40px;
	padding: 8px 12px;
}

.modal-form input:first-child {
	margin-top: 0;
}

.modal-form textarea {
	height: 131px;
	resize: none;
	padding: 9px 12px;
}

.modal-form input:focus, .modal-form textarea:focus {
	outline: solid 2px var(--Black);
}

@media (hover: hover) {
	.modal-form input:hover, .modal-form textarea:hover {
		background-color: var(--Gray10);
		transition: background-color var(--hover-in);
	}
}

.modal-form .invalid {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23DE0303'><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm24-384v24V264v24H232V264 152 128h48zM232 368V320h48v48H232z'/></svg>");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px;
	background-origin: content-box;
	background-color: var(--Gray6);
	outline: solid 2px var(--Red)!important;
}

@media (hover: hover) {
	.modal-form .invalid:hover {
		background-color: var(--Gray10);
	}
}

.modal-form textarea.invalid {
	background-position: right top;
}

.wait .modal-form button[type=submit] {
	filter: brightness(0.9) contrast(0.7);
}

.modal-form button[type=submit] {
	display: block;
	width: 360px;
	height: 46px;
	font-size: var(--Base-High);
	font-weight: 300;
	color: var(--White);
	background-color: var(--Black);
	border-color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	margin: 36px auto 0;
}

button[type=submit]:active:not(:disabled) {
	transform: scale(0.98);
	cursor: default;
}

.modal-form button[type=submit]:disabled {
	color: var(--Gray10);
	background-color: var(--Gray30);
	cursor: default;
}

.wpcf7-response-output {
	display: none!important;
}

#modal-layout-2 {
	display: none;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 583px;
}

.modal-wrapper.layout-2 #modal-layout-2 {
	display: flex;
}

#modal-layout-2 svg {
	margin-bottom: 2.5px;
}

#modal-layout-2 .modal-title {
	margin-bottom: 11px;
}

#modal-layout-2 .modal-lead {
	text-align: center;
	font-weight: 300;
	margin-bottom: 40px;
}

.modal-close-btn {
	font-size: var(--Caption);
	font-weight: 500;
	color: var(--Gray80);
	text-transform: uppercase;
	background-color: var(--Gray4);
	border-color: transparent;
	cursor: pointer;
	padding: 17px 35px;
	transition: color var(--hover-out), background-color var(--hover-out);
}

.modal-close-btn:hover {
	color: var(--Black);
	background-color: var(--Gray10);
	transition: color var(--hover-in), background-color var(--hover-in);
}

#modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 7;
}

.opened #modal-overlay {
	display: block;
	animation: Show 400ms ease-in normal forwards;
}

.animation #modal-overlay {
	animation: Hide 300ms ease-in normal forwards;
}

@media screen and (min-width: 992px) and (max-height: 583px) {
	.modal-close-icn {
		top: 19.5px;
	}
}

@media screen and (max-width: 992px) and (min-width: 720px) and (max-height: 583px) {
	.modal-close-icn {
		top: 19.5px;
	}
}

@media screen and (min-width: 721px) and (max-height: 583px) {
	.modal-wrapper {
		overflow-y: scroll;
		height: 100%;
	}
	.modal-form button[type=submit] {
		margin: 36px auto 27px auto;
	}
}

@media screen and (max-width: 720px) {
	.modal-open-icn {
		right: 4vw;
		bottom: 3vw;
		width: 10vw;
		height: 10vw;
	}
	.modal-wrapper {
		overflow-y: scroll;
		top: auto;
		width: 100%;
		height: 100%;
		padding: 0 10vw;
	}
	.opened .modal-wrapper {
		animation: Open 100ms ease-in normal forwards;
	}
	.animation .modal-wrapper {
		animation: Close 0ms ease-in normal forwards;
	}
	.modal-close-icn {
		top: 16px;
		right: 5vw;
		min-width: 4vw;
	}
	.modal-close-icn svg {
		width: 2.7vw;
	}
	#modal-layout-1, #modal-layout-2 {
		overflow: overlay;
	}
	#modal-layout-1 .modal-title {
		margin-top: 7vw;
	}
	#modal .modal-lead {
		--Body-Low: 16px;
	}
	.modal-form {
		margin-top: 3vw;
	}
	.modal-form input, .modal-form textarea {
		width: calc(100% - 4px);
		height: auto;
		min-height: 0;
		--Body-Low: 16px;
		background-size: 3.4vw;
		padding: 1.6vw;
		margin: 0 auto;
	}
	.modal-form input {
		margin-top: 2vw;
	}
	.modal-form textarea {
		min-height: 35vw;
		margin-top: 2vw;
		margin-bottom: 15vw;
	}
	.modal-form .invalid {
		background-size: 19px;
	}
	.modal-form button[type=submit] {
		position: fixed;
		bottom: 0;
		width: 80%;
		height: auto;
		--Base-High: 17px;
		margin: 0 auto 3vw;
		padding: 2vw 0;
	}
	#modal-layout-2 svg {
		width: 10vw;
		margin-bottom: 4vw;
	}
	#modal-layout-2 .modal-title {
		margin-bottom: 3vw;
	}
	#modal-layout-2 .modal-lead {
		margin-bottom: 10vw;
	}
	.modal-close-btn {
		--Caption: 11px;
		padding: 2.5vw 3vw;
	}
	.animation #modal-overlay {
		animation: Hide 0ms ease-in normal forwards;
	}
}

@media screen and (max-width: 720px) and (orientation: landscape) {
	.modal-open-icn {
		width: 12vw;
		height: 12vw;
	}
	.modal-close-icn {
		right: 1vw;
	}
	#modal-layout-1 .modal-title {
		margin-top: 3vw;
	}
	#modal .modal-lead {
		font-weight: 300;
	}
	#modal-layout-1 .modal-lead {
		margin-top: 1.2vw;
	}
	.modal-form input {
		background-size: 3vw;
		margin-top: 1.2vw;
	}
	.modal-form textarea {
		min-height: 25vw;
		background-size: 3vw;
		margin-top: 1.2vw;
		margin-bottom: 15vw;
	}
}

@media screen and (max-width: 425px) {
	.modal-open-icn {
		width: 17vw;
		height: 17vw;
	}
	.modal-wrapper {
		padding: 0 5vw;
	}
	.modal-close-icn {
		top: 3.3vw;
		right: 5.3vw;
	}
	.modal-close-icn svg {
		width: 15px;
	}
	#modal .modal-lead {
		font-weight: 300;
	}
	#modal-layout-1 .modal-lead {
		--Body-Low: 14px;
	}
	.modal-form input, .modal-form textarea {
		--Body-Low: 14px;
		background-size: 5vw;
		padding: 2.5vw 2.5vw;
	}
	.modal-form input {
		margin-top: 3.5vw;
	}
	.modal-form textarea {
		margin-top: 3.5vw;
		margin-bottom: 21.5vw;
	}
	.modal-form .invalid {
		background-size: 18px;
	}
	.modal-form button[type=submit] {
		width: 90%;
		--Base-High: 18px;
		margin: 0 auto 4vw;
		padding: 2.5vw 0;
	}
	#modal-layout-2 svg {
		width: 19vw;
		margin-bottom: 7vw;
	}
	#modal-layout-2 .modal-title {
		text-align: center;
		margin-bottom: 4vw;
	}
	#modal-layout-2 .modal-lead {
		--Base-Low: 18px;
		margin-bottom: 15vw;
	}
	.modal-close-btn {
		--Caption: 11px;
		padding: 3vw 4vw;
	}
}

@media screen and (max-width: 425px) and (orientation: landscape) {
	.modal-close-icn {
		top: 3vw;
	}
	.modal-close-icn svg {
		width: 15px;
	}
	.modal-form textarea {
		margin-bottom: 18vw;
	}
}

@media screen and (max-width: 360px) {
	#modal .modal-lead {
		--Body-Low: 12px;
	}
	.modal-form input {
		--Body-Low: 12px;
	}
	.modal-form textarea {
		--Body-Low: 12px;
	}
	.modal-form .invalid {
		background-size: 14px;
	}
	.modal-form button[type=submit] {
		--Base-High: 14px;
	}
}

@media screen and (max-width: 325px) {
	.modal-close-icn {
		top: 4vw;
		right: 1vw;
	}
	.modal-close-icn svg {
		width: 12px;
	}
}