@charset "UTF-8";
.contact-us .container {
		display: grid;
		grid-template-areas:
				"he"
				"fo"
				"co";
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
		gap: var(--vert-padding) var(--side-padding);
		padding-top: 30px;
}
@media only screen and (min-width: 1024px) {
		.contact-us .container {
				padding-top: 16px;
		}
}
.contact-us .head {
		grid-area: he;
}
.contact-us .form {
		grid-area: fo;
}
.contact-us .contacts {
		grid-area: co;
}
.contact-us .head {
		font-size: 14px;
		max-width: 31.0625em;
}
.contact-us .head .text {
		color: var(--blackgrey);
}
.contact-us .form {
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		display: flex;
		flex-direction: column;
}
.contact-us .form > * {
		flex: 0 0 auto;
		width: 100%;
}
.contact-us .form legend {
		position: absolute;
		transform: scale(0);
		opacity: 0;
		pointer-events: none;
}
.contact-us .contacts {
		list-style: none;
		margin: 0;
		padding: 0;
		background: var(--white);
		border-radius: 10px;
		color: var(--blackgrey);
		text-align: left;
		font-size: 14px;
}
.contact-us .contacts li {
		list-style: none;
		margin: 0;
		padding: 20px;
}
.contact-us .contacts li:not(:first-child) {
		border-top: 2px solid var(--body);
}
.contact-us .contacts .big {
		display: block;
		color: var(--black);
		font-weight: 300;
		font-size: 18px;
		margin: 5px 0 0 0;
}
.contact-us .contacts a {
		color: inherit;
}
@media only screen and (min-width: 760px) {
		.contact-us {
				padding-bottom: 50px;
		}
		.contact-us .container {
				grid-template-areas:
						"he fo"
						"co fo";
				grid-template-columns: 1fr 350px;
				grid-template-rows: 1fr auto;
		}
		.contact-us .head {
				margin-right: auto;
				margin-bottom: auto;
				width: 100%;
		}
		.contact-us .form {
				margin-left: auto;
				width: 100%;
				max-width: 480px;
		}
		.contact-us .form-submit {
				margin-top: auto;
		}
		.contact-us .contacts {
				margin-top: auto;
				margin-right: auto;
				width: 100%;
				background: none;
				border-radius: 0;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				gap: 30px;
				max-width: 460px;
		}
		.contact-us .contacts li {
				border: 0 !important;
				padding: 0;
				flex: 1 1 33%;
				max-width: 100%;
		}
}
@media only screen and (min-width: 1024px) {
		.contact-us .h1 {
				font-size: 3.5rem;
				line-height: 1.2;
		}
		.contact-us .container {
				grid-template-columns: 50% calc(50% - var(--side-padding));
		}
		.contact-us .head {
				font-size: 16px;
		}
		.contact-us .form-submit {
				padding-top: 105px;
		}
		.contact-us .contacts .big {
				font-size: 20px;
		}
}
/*animations*/
.contact-us .head > *, .contact-us .form-el, .contact-us .form-submit, .contact-us .contacts {
		backface-visibility: hidden;
		transition-property: transform, opacity;
		transition-duration: 1.5s;
		transition-timing-function: var(--move-timing);
		transform: translate3d(0, 0, 0);
}
.contact-us:not(.visible) .head > *, .contact-us:not(.visible) .form-el, .contact-us:not(.visible) .form-submit, .contact-us:not(.visible) .contacts {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translate3d(0, var(--distance), 0);
}
.contact-us .head .text {
		transition-delay: 0.25s;
}
.contact-us .form-el {
		transition-delay: 0.8s;
}
.contact-us .form-el:nth-of-type(1) {
		transition-delay: 0.5s;
}
.contact-us .form-el:nth-of-type(2) {
		transition-delay: 0.6s;
}
.contact-us .form-el:nth-of-type(3) {
		transition-delay: 0.7s;
}
.contact-us .form-submit {
		transition-delay: 0.9s;
}
.contact-us .contacts {
		transition-delay: 0.5s;
}