@charset "utf-8";

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

	--contactFormTitleColor: #6b6b6b;
	--contactFormTitleSize: 26px;
	--contactFormTitleBorderColor: #aaa;
	--contactFormColor: #000;
	--contactFormSize: 16px;
	--contactFormColorError: #ff1654;
	--contactFormSizeError: 16px;
	--contactFormColorSuccess: #199aca;
	--contactFormSizeSuccess: 24px;

	--contactFontColor: #fff;
	--contactFontSize: 16px;

	--contactButtonBg: rgba(100, 116, 87, 1);
	--contactButtonBgActive: rgba(100, 116, 87, 0.5);
	--contactButtonColor: #fff;

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

.contact {
	text-align: center;
}
.contact > .photo img {
	max-height: 300px;
}



.contact > .form {
	width: 600px; max-width: 100%;  margin: 80px auto 0 auto; padding: 40px; position: relative;
	background: var(--contactBgColor); color: var(--contactFormTitleColor);
}
.contact > .form > .title {
	font-size: var(--contactFormTitleSize); line-height: 1.5em;
}
.contact > .form > .fields {
	padding: 40px 0 20px 0;
}
.contact > .form > .fields > div {
	padding: 10px 0;
}
.contact > .form > .fields input {
	color: var(--contactFormColor); font-size: var(--contactFormSize); line-height: 1.5em; width: 100%; padding: 10px 20px;
	border: var(--contactFormTitleBorderColor) 1px solid; border-radius: 5px;
}
.contact > .form > .fields textarea {
	color: var(--contactFormColor); font-size: var(--contactFormSize); line-height: 1.5em; width: 100%; height: 100px; padding: 10px 20px;
	border: var(--contactFormTitleBorderColor) 1px solid; border-radius: 5px;
}
.contact > .form > .fields .authImage {
	height: 40px; vertical-align: top; border-radius: 5px; margin: 7px 0 0 0;
}
.contact > .form > .fields .authButton {
	margin: 10px 0;
}
.contact > .form > .fields .error {
	color: var(--contactFormColorError); font-size: var(--contactFormSizeError); display: block; padding: 0 0 10px 0;
}
.contact > .form .success {
	color: var(--contactFormColorSuccess); font-size: var(--contactFormSizeSuccess); line-height: 1.5em; display: block; padding: 10px 0 10px 0;
}
.contact > .form > .buttons {
}
.contact > .form > .buttons input {
	width: 200px; padding: 10px 20px; color: var(--contactButtonColor); font-size: var(--contactFormSize); line-height: 1.5em; border-radius: 5px;
	transition: background 0.5s; background-color: var(--contactButtonBg);
}
.contact > .form > .buttons input:hover, .contact > .form > .buttons input.active {
	background-color: var(--contactButtonBgActive);
}
.contact > .form > .mask {
	width: 100%; height: 100%; background: var(--contactMaskColor); position: absolute; z-index: 1; margin: -40px 0 0 -40px; display: none;
}
.contact > .form > .mask.active {
	display: block;
}
.contact > .form > .mask > div {
	width: inherit; height: inherit; position: relative;
}
.contact > .form > .mask img {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}


.contact > .content {
	color: var(--contactFontColor); font-size: var(--contactFontSize); line-height: 1.5em; letter-spacing: 3px;
}
.contact > .content a {
	color: var(--contactFontColor); font-size: var(--contactFontSize);
	transition: opacity 0.3s; opacity: 1;
}
.contact > .content a:hover {
	opacity: 0.7;
}
.contact > .content > div {
	margin: 0 0 40px 0;
}
.contact > .content > div > .text {
	margin: 10px 0 0 0;
}
.contact > .content > div img {
	max-height: 14px; vertical-align: middle;
	transition: opacity 0.3s; opacity: 1;
}
.contact > .content > div img:hover {
	opacity: 0.7;
}
.contact > .content > div .map {
	width: 600px; max-width: 100%; height: 450px; border: none;
}