@charset "utf-8";

:root {
	--contactBgColor: rgba(255, 255, 255, 1);

	--contactTitleColor: #6b6b6b;
	--contactTitleSize: 26px;
	--contactTitleBorderColor: #aaa;
	--contactFontColor: #000;
	--contactFontSize: 18px;
	--contactFontColorError: #ff1654;
	--contactFontSizeError: 16px;
	--contactFontColorSuccess: #199aca;
	--contactFontSizeSuccess: 24px;

	--contactButtonBg: #199aca;
	--contactButtonBgActive: #25b8ee;
	--contactButtonColor: #fff;

	--contactMaskColor: rgba(0, 0, 0, 0.2);
}

.contact {
	padding: 40px 80px 100px 80px; display: grid; grid-template-columns: 440px 1fr; grid-column-gap: 20px;
}
.contact > .photo img {
	max-width: 100%;
}
.contact > .content {
	background: var(--contactBgColor); color: var(--contactTitleColor); padding: 40px; position: relative;
}
.contact > .content > .title {
	font-size: var(--contactTitleSize); line-height: 1.5em;
}
.contact > .content > .fields {
	padding: 40px 0 20px 0;
}
.contact > .content > .fields > div {
	padding: 10px 0;
}
.contact > .content > .fields input {
	color: var(--contactFontColor); font-size: var(--contactFontSize); line-height: 1.5em; width: 100%; padding: 10px 20px;
	border: var(--contactTitleBorderColor) 1px solid; border-radius: 5px;
}
.contact > .content > .fields textarea {
	color: var(--contactFontColor); font-size: var(--contactFontSize); line-height: 1.5em; width: 100%; height: 100px; padding: 10px 20px;
	border: var(--contactTitleBorderColor) 1px solid; border-radius: 5px;
}
.contact > .content > .fields .authImage {
	height: 48px; vertical-align: top; border-radius: 5px;
}
.contact > .content > .fields .authButton {
	margin: 10px 0;
}
.contact > .content > .fields .error {
	color: var(--contactFontColorError); font-size: var(--contactFontSizeError); display: block; padding: 0 0 10px 0;
}
.contact > .content .success {
	color: var(--contactFontColorSuccess); font-size: var(--contactFontSizeSuccess); line-height: 1.5em; display: block; padding: 10px 0 10px 0;
}
.contact > .content > .buttons {
}
.contact > .content > .buttons input {
	width: 200px; padding: 10px 20px; color: var(--contactButtonColor); font-size: var(--contactFontSize); line-height: 1.5em; border-radius: 5px;
	transition: background 0.5s; background-color: var(--contactButtonBg);
}
.contact > .content > .buttons input:hover, .contact > .content > .buttons input.active {
	background-color: var(--contactButtonBgActive);
}
.contact > .content > .mask {
	width: 100%; height: 100%; background: var(--contactMaskColor); position: absolute; z-index: 1; margin: -40px 0 0 -40px; display: none;
}
.contact > .content > .mask.active {
	display: block;
}
.contact > .content > .mask > div {
	width: inherit; height: inherit; position: relative;
}
.contact > .content > .mask img {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

@media only screen and (max-width: 980px) {
	.contact {
		grid-template-columns: 1fr;
	}
	.contact > .photo {
		display: none;
	}
}
@media only screen and (max-width: 720px) {
	.contact {
		padding: 40px 40px 100px 40px;
	}
}
@media only screen and (max-width: 480px) {
	.contact {
		padding: 40px 20px 100px 20px;
	}
}