@media only screen and (min-width: 0em) {
	/* Modal Container */
	.modal {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 10000;
		overflow: auto;
		outline: 0;
		justify-content: center;
		align-items: center;
	}

	/* Dialog */
	.modal-dialog {
		width: 100%;
		max-width: 55rem;
		margin: 1rem;
		position: relative;
		z-index: 10000;
	}

	/* Modal Content */
	.modal-content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		background-color: #fff;
		border-radius: 0.5rem;
	}

	picture {
		width: 100%;
		min-height: 8rem;
		/* clips img tag corners */
		overflow: hidden;
		display: block;
		position: relative;
		z-index: 1;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}

	picture img {
		width: 100%;
		height: 100% !important;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		object-position: center center;
	}

	/* Modal Body */
	.modal-body {
		padding: 2rem;
		position: relative;
		width: 100%;
	}

	.modal-body .modal-title {
		/* font-size: 2.8rem; */
		font-size: clamp(1.4rem, 6vw, 2.8rem);
		font-weight: bold;
		color: #07644b;
		line-height: 1.1;
	}

	.modal-body .modal-text {
		font-size: 1.1rem;
		margin-top: clamp(0.2rem, 2vw, 1.5rem);
	}

	.modal-body .disclaimer {
		font-size: 0.8rem;
		margin-top: 2rem;
	}

	.modal-body .disclaimer a {
		text-decoration: underline;
	}

	.modal-body .disclaimer a:hover {
		text-decoration: none;
	}

	.gform_wrapper {
		margin-top: 2rem;
	}
	.gform_wrapper label {
		font-weight: bold !important;
		font-size: 1rem;
	}
	.gform_wrapper input[type="email"] {
		border: 1px solid #777 !important;
		margin-top: 0.4rem;
		display: block;
		border-radius: 0.4rem;
	}
	.gform_wrapper input[type="submit"] {
		background-color: #07644b;
		color: #fff;
		border-radius: 0.5rem;
		padding: 0.8rem 1rem;
		margin-top: 1rem;
		display: block;
		font-weight: normal;
		margin: 0px;
	}
	.gform_wrapper input[type="submit"]:hover {
		background-color: #063629;
		color: #fff;
	}

	/* Close Button */
	.modal-close {
		margin: 0;
		padding: 0;
		border: none;
		width: 1.4375rem;
		height: 1.4375rem;
		cursor: pointer;
		background: none;
		font-size: 0;
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 1000;
	}

	.close-icon {
		position: relative;
		width: 1.375rem;
		height: 1.375rem;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 0.2rem;
		background-color: #000;
	}

	.close-icon::before,
	.close-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 0.125rem;
		background-color: #fff;
		transform: translate(-50%, -50%);
	}

	.close-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.close-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.close-icon:hover::before,
	.close-icon:hover::after {
		background-color: #000;
	}

	.gform_confirmation_wrapper {
		text-align: center;
		margin-top: 1rem;
	}

	.close-modal-button-after-submit {
		display: none;
		text-align: center;
	}

	.close-modal-button-after-submit button {
		background-color: #07644b;
		color: #fff;
		border-radius: 0.5rem;
		padding: 0.8rem 1rem;
		margin-top: 1rem;
		display: block;
		font-weight: normal;
		margin: 1rem 0 0;
	}
	.close-modal-button-after-submit button:hover {
		background-color: #063629;
		color: #fff;
	}

	/* Backdrop */
	.modal-backdrop {
		position: fixed;
		inset: 0;
		z-index: 9999;
		background-color: #000;
		opacity: 0;
		transition: opacity 350ms ease-in-out;
	}

	.modal-backdrop.is-open {
		opacity: 0.8;
	}

	/* Animations */
	.modal.in .modal-dialog {
		animation: scaleUp 350ms ease-in-out;
	}

	.modal.out .modal-dialog {
		animation: scaleDown 350ms ease-in-out;
	}

	@keyframes scaleUp {
		from {
			transform: scale(0.8);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes scaleDown {
		from {
			transform: scale(1);
			opacity: 1;
		}
		to {
			transform: scale(0.8);
			opacity: 0;
		}
	}
}
@media only screen and (min-width: 48rem) {
	.modal-content {
		flex-direction: row;
	}

	picture {
		width: 50%;
		min-height: auto;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0rem;
		border-bottom-left-radius: 0.5rem;
	}

	.modal-body {
		width: 50%;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.close-icon {
		background-color: transparent;
	}
	.close-icon::before,
	.close-icon::after {
		background-color: #444;
	}
}