.modal-form {
	overflow: auto;
	
	color: var(--main-color);
}
@media (min-width: 900px)	 { .modal-form { padding: 200px 0 150px; } }
@media (max-width: 899.99px) { .modal-form { padding: 25px 0 75px; } }

.contact-open #contact-modal,
.join-open #join-modal {
    opacity: 1;
    pointer-events: auto;
}

/*--------------------------------------------------------------------------------------------------------------------*/

.modal-form > .close-btn {
	position: absolute; z-index: 300;
	display: block; height: 50px; width: 50px;
	
	background-color: #000;
	
	-webkit-mask-image: url("../../images/icons/close.svg");
	mask-image: url("../../images/icons/close.svg");
	-webkit-mask-size: 35px;
	mask-size: 35px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	
	cursor: pointer;
}
@media (min-width: 900px)	 { .modal-form > .close-btn { top: 50px; right: 50px; } }
@media (max-width: 899.99px) { .modal-form > .close-btn { top: 25px; right: 25px; } }

/*--------------------------------------------------------------------------------------------------------------------*/

.modal-form > .content-wrapper {
	position: relative;
	display: flex; min-height: 100%;
}
@media (min-width: 900px) {
	.modal-form > .content-wrapper {
		flex-direction: row;
		align-items: center;
		column-gap: 140px;
	}
}
@media (max-width: 899.99px) {
	.modal-form > .content-wrapper {
		flex-direction: column;
		row-gap: 50px;
	}
}

/*--------------------------------------------------------------------------------------------------------------------*/

.modal-form > .content-wrapper > .logo {
	background-image: url("../../images/logo.color.svg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
}
.modal-form > .content-wrapper > .logo:after {
	content: '';
	display: block;
	padding-top: calc(100% + 4px);
}
@media (min-width: 900px) {
	.modal-form > .content-wrapper > .logo {
		order: 1;
		flex: 1;
	}
}
@media (max-width: 899.99px) {
	.modal-form > .content-wrapper > .logo {
		order: -1;
		max-width: 160px;
	}
}

/*--------------------------------------------------------------------------------------------------------------------*/

.modal-form > .content-wrapper > .common-form { flex: 0 0 440px; }