/*
Page: Contact
*/

#hero {
	background: url(../../images/bg-pattern2.webp) no-repeat left;
	background-image: -webkit-image-set(url(../../images/bg-pattern2.webp) 1x, url(../../images/bg-pattern2@2x.webp) 2x);
	background-repeat: repeat;
	background-position: center;
	padding-bottom: 216px;
}

#hero h1 {
	padding: 80px 0;
}

#hero h2 {
	padding: 80px 15px;
	font-size: 33px;
}

.mainc {
	padding: 0 102px 60px 102px;
}

.contacts {
	font-size: 23px;
	line-height: 1.15;
	padding-right: 30px;
}

.contacts .flex.full-width>div {
	padding-bottom: 32px;
}

.contacts .soc-instagram {
	width: 34px;
	height: 34px;
	background: url(../../images/icon-instagram-c.png);
	background-image: -webkit-image-set(url(../../images/icon-instagram-c.png) 1x, url(../../images/icon-instagram-c@2x.png) 2x);
}

.contacts .soc-facebook {
	width: 17px;
	height: 33px;
	background: url(../../images/icon-fb-c.png);
	background-image: -webkit-image-set(url(../../images/icon-fb-c.png) 1x, url(../../images/icon-fb-c@2x.png) 2x);
}

.mainc a:hover {
	color:var(--yellow);
}

.contact-socials a:hover {filter: invert(77%) sepia(98%) saturate(428%) hue-rotate(341deg) brightness(97%) contrast(104%);}



@media screen and (max-width: 1130px) {
	.mainc {
		padding: 0 50px 60px 50px;
	}

	.contacts {
		font-size: 20px;
	}

}


@media screen and (max-width: 960px) {
	.mainc {
		flex-direction: column;
	}

	.mainc .col-6 {
		width: 100%;
		padding: 0;
		max-width: 411px;
		margin: 0 auto;
	}


}

@media screen and (max-width: 768px) {}

@media (max-width: 567px) {
	#hero h1 {
		padding: 50px 0;
	}

	#hero {
		padding-bottom: 50px;
	}

	#hero h2 {
		padding: 50px 15px;
		font-size: 28px;
	}

	.mainc {
		padding: 0 30px 50px 30px;
	}

	.contacts {
		font-size: 18px;
	}
}

@media (max-width: 440px) {
	.contacts .flex.full-width {
		flex-direction: column;
	}

	.contacts .flex.full-width>div.bold {
		padding-bottom: 0;
	}

	.contacts .flex.full-width .text-left {
		text-align: center;
	}

	.contacts .flex.items-end {
		align-items: center;
	}
}